仅使用 JavaScript 延迟图像不会消除 PageSpeed 警告

Question

为了延迟图像，我实现了 Patrick Sexton 在他的网站上提供的解决方案，但到目前为止没有成功！

它不会消除 PageSpeed Insights 中的 "Prioritize visible content" 警告

我的HTML是：

<img class="slideshow-item active"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" 
data-src="images/....jpg" 
width="1982" height="954" alt="1" title="1" />

我的 JS 是：

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;

Answer 1

Patrick Sexton 文章中指定的技术与图像延迟加载不同！在延迟加载中，我们应该监控滚动位置并只加载进入视野的图像。但是，正如那篇文章中提到的，您在这里使用的方法，仅延迟将（指定的）图像加载到初始页面加载后立即 ].

换句话说，所有图像都将在没有用户交互的情况下加载，但它只会尝试加载主要内容（如 html、css、js 和你没有的重要图像data-src) 应用了它们的来源，然后开始加载其余图像。

如果您知道自己选择实施什么，那么 PageSpeed Insights 警告对您的情况并不重要。每种方法都有自己的优点和用法。正如参考文章中所写，延迟加载的主要缺点可能是：

The most common reason people may chose not to defer images via lazy loading is likely the new popular trend of having one-page templates.

在 one-page 应用程序中，主导航不会将您带到其他页面，它只是将您带到同一页面的不同部分。您的页面加载，用户看到您的主导航，如果他们点击，他们将被带到您的页面中尚未加载图像的部分（这不太好）。

提供的技术忽略了这个问题。

仅使用 JavaScript 延迟图像不会消除 PageSpeed 警告

Deferring images using only JavaScript doesn't eliminate PageSpeed warning

javascript

image

deferred-loading

pagespeed