0

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

它不会消除 PageSpeed Insights 中的“优先考虑可见内容”警告

我的 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;
4

1 回答 1

1

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

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

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

人们可能选择不通过延迟加载延迟图像的最常见原因可能是拥有一页模板的新流行趋势。

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

所提供的技术省略了这样的问题。

于 2017-02-12T10:21:47.477 回答