如何移除懒加载图片时出现的Wire Frame边框

我正在给部分网站的favicon设置懒加载（lazy loading），发现图片在懒加载过程中，周围会出现Wire Frame边框（参考下图nutrition.gov左侧的示例）。请问怎么阻止这个边框在懒加载时显示？

当前使用的代码： #

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

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

<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()">

解决方法 #

这个边框是浏览器对未加载完成图片的默认占位样式，以下几种方案可以解决：

1. 移除默认边框并设置透明背景

直接在.icon样式中添加border: 0和background: transparent，消除加载前的默认边框/背景占位：

.icon {
    height: 16px;
    width: 16px;
    outline: none;
    border: 0; /* 清除浏览器默认边框 */
    background: transparent; /* 确保背景透明 */
}

2. 初始隐藏图片，加载完成后显示

先把图片设为隐藏状态，加载成功后再显示，避免加载过程中出现占位框：

.icon {
    height: 16px;
    width: 16px;
    outline: none;
    border: 0;
    display: none; /* 初始隐藏 */
}

修改JavaScript并添加onload事件：

function showIcon(img) {
    img.style.display = "inline-block"; // 加载完成后显示
}
function hideIcon(img){
    img.onerror = null;
    img.style.display = "none";
}

对应的HTML：

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

3. 使用透明占位图替代空src

用base64格式的透明图片作为初始src，真实地址放到data-src，通过JS触发懒加载，彻底避免空占位边框：

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

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.icon').forEach(img => {
        img.src = img.dataset.src;
        img.onerror = () => img.style.display = "none";
    });
});

HTML修改：

<img class="icon" data-src="https://www.nutrition.gov/favicon.ico" height="16" width="16" src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=">

内容的提问来源于stack exchange，提问作者Lawrence Imabr