我在网页上插入了延迟图像，但是Google SpeedTest告诉我要考虑延迟加载屏幕外和隐藏的图像。

Question

为了在webpsges上显示图像，我插入了这个站点https://varvy.com/pagespeed/defer-images.html提供的解决方案。

我修改了IMG调用

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image1.jpg" alt="image 1">

并在页面底部插入JS代码。

<script>function init() { var imgDefer = document.getElementsByTagName('img'); for (var i = 0; i < imgDefer.length; i++) {if (imgDefer[i].getAttribute('data-src')) {      imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));}}} window.onload = init; </script>

工作正常。然而，在使用Google 'PageSpeed洞察‘工具时，我仍然获得以下消息：

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive

我认为的修复是一个有效的“延迟加载屏幕外”解决方案吗？我以为它能解决问题。其他的解决办法更好吗？谢谢。

Answer 1

我建议使用lozad.js + polyfill来延迟屏幕外的图像(也称为延迟加载)。我还没有读过这篇变体文章，但是有人写过，这个方法只在onload事件之后延迟图像的加载，所以页面的初始加载权保持不变。

Lozad将不会加载一个图像，直到它即将被滚动到视口。

对于<img>，使用一个空的<svg>作为初始的src值，下面的viewBox中的6 9定义了宽度(6)和高度(9)之间的关系，=>修改这些值以适应您的上下文。这将确保在加载图像后页面布局中不会再流。

src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3C/svg%3E"

请注意，lozad.js使用的交集观察者API仍然缺乏浏览器支持，所以一定要添加一个填充。

祝好运!