使用window onload或document延迟图像，以改进分页扫描程序
使用window onload或document延迟图像，以改进分页扫描程序
提问于 2019-02-02 16:38:00
我一直在用以下代码延迟站点上的所有图像(普通图像或背景图像)
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标记中运行，这个标记应该可以工作，但是我注意到，分页忽略了它们被推迟的事实，只要求我推迟它们。
我注意到google上的延迟图片说明
灯塔标志屏幕外的图像是在时间交互(TTI)事件之前被请求的。
什么时候我应该调用我的延迟代码，这样页面/灯塔审计实际上注意到了我正在推迟的事实？
代码肯定是工作的，我可以积极地看到它在加载页面后加载图像。
回答 2
Stack Overflow用户
发布于 2019-02-02 16:49:31
如您所知，是屏幕外图像来处理这一问题，要么使用像懒散加载屏幕外图像这样的预先制作的小型库，要么使用正确的相交观察者
window.onlad不会帮助您克服时间到交互
建议：默认情况下，您甚至可以显示一个小缩略图或图像占位符，一旦页面加载，您就可以用高质量的真实图像来替换它们，这样浏览器就不会显示offscren图像问题，作为参考，您可以看到https://medium.com/是如何加载图像的。
Stack Overflow用户
发布于 2019-02-02 16:44:44
如果没有可用的话，您可能想尝试使用requestIdleCallback并回退到setTimeout。
您也可以选择不加载所有，并优先考虑那些在视图中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54495115
复制相关文章
相似问题
腾讯云开发者
