如何force/trigger加载Wordpress原生延迟加载图片而不滚动？

Question

我不喜欢延迟加载，因为它在用户体验方面对用户来说非常难看。但是，我了解其中的好处（更快的页面加载、低带宽、高 PageSpeed 分数等）

我打算编写 javascript 代码，它将：

留在底部 > 等待页面完全加载 > 3 秒后它会起作用 > 强制加载之前在初始页面加载期间延迟加载的所有图像

有了这个，我不会丢失任何速度分数（因为它会正常加载延迟加载的图像）但是，当一切都完成后，也会加载完整的图像，所以用户不会注意到。（我们为加载实时聊天脚本做同样的事情。它工作得很好）

它可能看起来像这样：

<script>
window.onload = function() {
    setTimeout(function(){ 
        var ForceLoadImages = document.createElement('script');
        ForceLoadImages.type = 'text/javascript';
        ForceLoadImages.src = 'link-to-the-script-to-force-load-images.js';
        document.body.appendChild(chatScript);
    }, 3000);
};
</script>

我不是js专家。这只是一个提供想法的虚拟示例。我特别询问如何编写“link-to-the-script-to-force-load-images.js”部分的内容。将不胜感激。

有一个，但需要 Wordpress 的答案。

Answer 1

我猜 wp 延迟加载使用 data-src 属性来保存图像，当在视口中时，它会将图像添加到 src 属性。

简化成这样：

<img data-src="URL"/>

*如果不是这样，请在您的源代码中找到在视图外时图像所在的属性

你需要做的是 select 所有图像并将 data-src 更改为 src 像这样：

var images = document.querySelectorAll('img');

window.onload = function() {
setTimeout(function(){ 
for (var i=0; i<images.length; i++) {
    if(images[i].getAttribute('data-src')) {
       images[i].setAttribute('src',images[i].getAttribute('data-src'));
       images[i].removeAttribute('data-src'); // optional if you need to remove data-src attribute after setting src
    }
}
}, 3000);
};

<div class="container">
<img data-src='https://picsum.photos/id/237/200/300' />
<img data-src='https://picsum.photos/seed/picsum/200/300' />
<img data-src='https://picsum.photos/200/300' />
</div>

Answer 2

我只是想将解决方案作为答案 ()，他们正在寻找类似的东西。它非常干净，效果很好：

<script>
var loadimages = document.querySelectorAll('img');
window.onload = function() {
   setTimeout(function(){
      //Force Load images
      for (var i=0; i<loadimages.length; i++) {
         if(loadimages[i].getAttribute('loading')) {
            loadimages[i].removeAttribute('loading');
         }
      }
   }, 3000);
};
</script>

这是给谁的？ 对于那些不喜欢延迟加载图像的用户体验的人。但由于 PageSpeed 分数而应用它。

把这个放在哪里？ 将其放在页面底部。

这个脚本是做什么的？ 该脚本在页面完全加载后运行 3 秒。它强制加载所有等待进入视口的图像，通过删除“加载”属性进行延迟加载。因此，您可以在延迟图像加载的同时获得良好的页面速度分数，同时保持更好的用户体验。 （请记住，您失去了延迟加载概念的带宽优势）

如何force/trigger加载Wordpress原生延迟加载图片而不滚动？

How to force/trigger the load of Wordpress native lazy loading images without scrolling?

javascript

wordpress

lazy-loading

pagespeed