Javascript 页面加载时间-预加载图像和延迟加载

我正在创建一个电子商务网站。然而，我们添加的产品越多，我们需要在页面上显示的图像就越多，网站的速度也开始放缓

到目前为止，我所做的是首先用PHP预加载所有图像，如下所示：

foreach(glob("media/product_images/*") as $file) {
    if(filetype($file) != 'dir'){
        echo '<link rel="preload" href="'.$file.'" as="image">';
    }
}

HTML:

---

我不确定这方面的最佳实践是什么，我找到了几种不同的方法来实现这一点，但不确定什么是最好的。

Hi您可以使用浏览器的

Intersection observator API

来评估图像是否位于折叠下方，并在图像实际位于视口中时更新其

src

属性：但并非所有浏览器都支持它，因此您需要找到解决方法@t3___rry。谢谢你的评论。不幸的是，我们销售的是工业起重设备，所以我们的许多客户仍然使用非常旧的IE版本，我是说非常旧的。。。就像痛苦的老开发：（不客气，我在Github上发现了一个polyfill：我还没有测试它though@t3__rry再次感谢，我会调查这件事，看看进展如何

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img){
    img.setAttribute('src', img.getAttribute('data-src'));
    img.onload = function(){
        img.removeAttribute('data-src');
    };
});

<img data-src='../path/to/image.png'>

img{
    opacity:1;
    transition:opacity 0.3s;
}
img[data-src]{
    opacity:0;
}