0

I'm lazy loading some website's favicons. When they're lazy loading, a wire frame appears around the loading image (see to the left of nutrition.gov in the image). How do I prevent this wire frame/outline from appearing around a loading image?

enter image description here

.icon {
    height: 16px;
    width: 16px;
    outline: none;
}

<script>
        function hideIcon(img){
            img.onerror = null;
            img.style.display = "none";
        }
</script>

<img class="icon" src="https://www.nutrition.gov/favicon.ico" height="16" width="16" loading="lazy" onerror="hideIcon()">

    <img class="icon" src="https://www.nutrition.gov/favicon.ico" height="16" width="16" loading="lazy" onerror="hideIcon()">

   <img class="icon" src="https://www.nutrition.gov/favicon.ico" height="16" width="16" loading="lazy" onerror="hideIcon()">

    <img class="icon" src="https://www.nutrition.gov/favicon.ico" height="16" width="16" loading="lazy" onerror="hideIcon()">

<img class="icon" src="https://www.nutrition.gov/favicon.ico" height="16" width="16" loading="lazy" onerror="hideIcon()">
Lawrence Imabr
  • 29
  • 5
  • Is this happening *only* on FF mobile? – jmargolisvt Sep 20 '22 at 00:21
  • Happens with all mobile browsers. Edited my post to reflect that – Lawrence Imabr Sep 20 '22 at 00:51
  • That's just the default behavior for when the link to the image is broken. https://www.nutrition.gov/favicon.ico is 404. That's your real issue. ;) – jmargolisvt Sep 20 '22 at 01:37
  • I see. Is it possible to prevent the outline from appearing as part of that behavior? I use an onerror function to hide the broken links, but for a split second you still see the wire frame appear and it's really ugly. – Lawrence Imabr Sep 20 '22 at 02:22
  • [This question](https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html) have a lot of answers that are very useful. – vee Sep 20 '22 at 03:18

0 Answers0