为懒加载图片添加宽高仍遭PageSpeed报错的解决方案问询

我希望为页面中的每张图片添加width和height属性，使用JS代码后控制台显示已成功添加，但PageSpeed Insights持续提示**"Image elements do not have explicit width and height"**。同时用lazysizes实现懒加载（替换src为data-src、添加lazyload类），但发现添加宽高的操作和懒加载冲突，移除lazyload类后宽高设置才生效。由于文章图片数量多无法手动设置，请问如何同时实现这两个功能？

问题原因 #

核心问题出在逻辑顺序和图片加载机制上：你先将图片的src替换为data-src并移除了原src，导致图片无法触发加载流程——没有src的图片不会发起请求，因此image.complete始终为false，后续绑定的load事件也永远不会触发，自然无法获取naturalWidth和naturalHeight来设置宽高属性。

另外，PageSpeed Insights会在页面加载的早期阶段检测图片属性，此时你的JS逻辑要么还未执行，要么因为图片未加载而无法设置宽高，所以持续报错。

解决方案 #

调整逻辑顺序：先通过内存克隆图片获取真实宽高，再处理懒加载的src替换操作，这样既不会阻塞页面渲染，也能确保宽高属性被正确设置。

修改后的JS代码 #

function addLazyloadAndDimensionsToImages() {
    var images = document.querySelectorAll('img');
    for (var i = 0; i < images.length; i++) {
        (function(image) {
            // 仅对无宽高属性的图片进行处理
            if (!image.hasAttribute('width') && !image.hasAttribute('height')) {
                var imgClone = new Image();
                imgClone.src = image.getAttribute('src');
                
                // 克隆图片加载完成后，为原图片设置真实宽高
                imgClone.onload = function() {
                    image.setAttribute('width', this.naturalWidth);
                    image.setAttribute('height', this.naturalHeight);
                };
                
                // 可选：处理图片加载失败的情况
                imgClone.onerror = function() {
                    console.warn('无法获取图片尺寸：', image.getAttribute('src'));
                };
            }
            
            // 执行懒加载设置
            image.setAttribute('data-src', image.getAttribute('src'));
            image.removeAttribute('src');
            image.classList.add('lazyload');
        })(images[i]); // 立即执行函数避免循环变量作用域问题
    }
}

document.addEventListener('DOMContentLoaded', addLazyloadAndDimensionsToImages);

关键优化点 #

• 使用内存中的图片克隆加载原图片资源，不影响页面渲染，同时能可靠获取图片的真实宽高
• 用立即执行函数包裹循环逻辑，避免循环变量i的作用域污染问题
• 先完成宽高属性设置的逻辑，再执行懒加载的src替换操作
• 增加可选的错误处理，避免单张图片加载失败影响全局逻辑

补充CSS优化 #

为了确保图片在不同容器中自适应且保持比例，建议添加以下CSS：

img {
    max-width: 100%;
    height: auto;
}

这样即使设置了固定的width和height属性，图片也会自动缩放，避免布局偏移。

ES6+简化版本（如果页面支持） #

const addLazyloadAndDimensionsToImages = () => {
    document.querySelectorAll('img').forEach(image => {
        if (!image.hasAttribute('width') && !image.hasAttribute('height')) {
            const imgClone = new Image();
            imgClone.src = image.src;
            imgClone.onload = () => {
                image.setAttribute('width', imgClone.naturalWidth);
                image.setAttribute('height', imgClone.naturalHeight);
            };
        }
        
        image.dataset.src = image.src;
        image.removeAttribute('src');
        image.classList.add('lazyload');
    });
};

document.addEventListener('DOMContentLoaded', addLazyloadAndDimensionsToImages);

内容的提问来源于stack exchange，提问作者Ujjawal Bhandari