我在网页上插入了延迟图片，但是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 Insights”工具时，我仍然收到以下消息：

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

---

我认为该修复程序是有效的“延迟加载屏幕外”解决方案吗？我认为这可以解决问题。其他修复程序是否是更好的解决方案？谢谢。

Answer 1

我建议使用lozad.js + polyfill延迟屏幕外图像（也称为延迟加载）。我没有读过有关varvy的文章，但有人读过，写道该方法仅延迟onload事件之后的图像加载，因此页面的初始加载权重保持不变。

Lozad除非要滚动到视口中，否则不会加载图像。

对于<img>，请使用空的<svg>作为初始src值，其中以下6 9中的viewBox定义了宽度（6）和height（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使用的Intersection Observer API仍然缺乏浏览器支持，因此请确保添加一个polyfill。

祝你好运！