Remove wire frame around image when it is lazy loading

Lawrence Imabr 0
Viewed 34

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()">
css html
0 Answers
Related