如何在不滚动的情况下强制/触发Wordpress本机延迟加载图像的加载？

Question

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

我计划编写一个javascript代码，它将：

呆在底层

这样，我就不会丢失任何速度分数（因为它会像平常一样加载延迟加载的图像），但是，当一切都完成时，我也会加载完整的图像，所以用户不会注意到。（我们在加载实时聊天脚本时也做了同样的操作，效果非常好）

它可能看起来像这样：

<script>
window.onload = function() {
    setTimeout(functhtml" target="_blank">ion(){ 
        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专家。这只是一个给出想法的虚拟示例。我特别询问如何编写“链接到脚本以强制加载images.js”部分的内容。如果您有任何意见，我们将不胜感激。

这里有一个类似的问题，但需要Wordpress的回答。

Answer 1

我只是想把这个解决方案作为一个答案（感谢凯泽），他们正在寻找这样的东西。这是非常干净，工作很好：

<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>

Answer 2

我猜想wp惰性负载使用data-src属性来保存图像，当在view port中时，它将图像添加到src属性中。

简化如下：

<img data-src="URL"/>

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

您需要做的是选择所有图像，并将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>