使用窗口加载或文档准备延迟图像以提高页面速度scpre

Question

我一直在使用以下代码延迟我网站上的所有图像(普通图像或背景图像(

var imgDefer = document.querySelectorAll('img[data-deferred-image]');
for (var i=0; i < imgDefer.length; i++) {
    if(imgDefer[i].getAttribute('data-deferred-image')) {
        imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-deferred-image'));
    }
}
var backgroundImgDefer = document.querySelectorAll('[data-deferred-bg-image]');
for (var i=0; i < backgroundImgDefer.length; i++) {
    if(backgroundImgDefer[i].getAttribute('data-deferred-bg-image')) {
        backgroundImgDefer[i].style.backgroundImage = 'url("' + backgroundImgDefer[i].getAttribute('data-deferred-bg-image') + '")';
    }
}

这目前正在window.onload标签中运行，这应该可以工作，但我注意到 pagespeed 忽略了它们被推迟的事实，只是要求我推迟它们。

我注意到在谷歌延迟图像说明上它指出

灯塔标记在交互时间 (TTI( 事件之前请求的屏幕外图像。

我

什么时候应该调用我的延迟代码，以便页面速度/灯塔审计实际上注意到我推迟它的事实？

代码肯定有效，我可以主动看到它在页面加载后加载图像。

Answer 1

如您所知，它是屏幕外图像来处理这个问题，要么使用预制的小库，如延迟加载具有懒惰大小的屏幕外图像，要么使用适当的交集观察器

window.onlad 不会帮助你克服互动时间

建议：您甚至可以默认显示一个小的缩略图或图像占位符，一旦页面加载，您可以将它们替换为高质量的真实图像，这样浏览器就不会显示 offscren 图像问题，作为参考，您可以看到 https://medium.com/如何加载图像。

Answer 2

您可能

希望尝试使用 requestIdleCallback 并回退到 setTimeout(如果不可用(。

您也可以不全部加载它们，而是首先优先考虑视图中的那些。