仅使用JavaScript延迟图像不会'；t消除页面速度警告

为了延迟图像，我在他的网站上实现了提供的解决方案，但迄今为止运气不佳

它不会消除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;

函数init（）{
var imgDefer=document.getElementsByTagName（'img'）；
对于（var i=0；i您的Patrick Sexton文章中指定的技术与图像的延迟加载不同！在延迟加载中，我们应该监视滚动位置并仅加载进入视图的图像。但是，正如该文章中提到的，您在这里使用的方法，仅延迟加载（指定的）初始页面加载后立即将图像添加到

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

如果您知道选择实现什么，PageSpeed Insights警告对于您的案例并不重要。每种方法都有其自身的优点和用法。正如参考文章中所述，延迟加载的一个主要缺点可能是：

人们可能选择不通过延迟加载延迟图像的最常见原因可能是新的流行趋势，即使用单页模板

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

提供的技术忽略了此类问题。
请告诉我们使用症状或更好的方法：在a中显示-您可以使用lorempixel来获取要显示的图像。您没有发布任何JavaScript，也没有提供来自console@mplungjan我所期望的是消除“对可见内容进行优先级排序”相反，PageSpeed Insights中的警告没有更改。这是您没有提供的信息。因此延迟有效，但“PageSpeed”警告不会消失？这是您的问题吗？@mplungjan正确！图像按我的要求加载。JS放在的正前方，控制台中没有出现错误，警告仍然存在（PSI）我修正了你的问题告诉你想用什么-在互联网上以及Patrick的Sexton网站上到处都是相同的信息之前，这是一个X/Y问题！不过，你不必重复……我希望得到解释，甚至是解决方案。你的评论我不清楚，我想我已经解释过了。那么你的问题是什么？解决方案是什么或者什么？您的代码按预期工作问题是：为什么延迟图像（仅使用JavaScript）并不能消除PageSpeed“优先显示内容”警告？正如我所说，答案是：您选择的方法是，在加载页面内容之后（调用：
window.onload=init；
）部分延迟图像加载当用户将页面滚动到图像的位置时，您的方法不会将PON图像加载到稍后的时间，并且PSI警告只考虑此完全懒惰类型的延迟。如果需要，您不应该依赖该警告，并且选择帕特里克方法。对于完全懒惰的负载，应该使用您可能知道的。