javascript - js中图片异步加载可能出现的问题

Question

我编写了以下 javascript 代码来异步加载图像:

const $collection = $('#CollectionSection .grid-uniform'),
$images = $collection.find('.grid-product__image'),
imagesLen = $images.length;

for (var i=0; i<imagesLen; i++){
    setTimeout(function() {
        $images[imagesLen-i].src = $images[imagesLen-i].src.replace('_compact.', '_grande.');
        i--;
    }, 100*(i+1));
}

我的问题是，这是一个有效的代码吗？这会帮助我的页面加载速度更快吗(假设 _compact 图像真的很小)？

Answer 1

简短的回答是不。据我了解，您想通过每 100 毫秒加载一个图像来单独加载一堆图像。

这意味着如果您有 20 张图片，您将花费 2 秒加载时间，如果您有 100 张图片，您将花费 10 秒加载时间。我敢打赌，如果连接正常，任何浏览器都可以胜过它。

我不想在这方面抢占浏览器。只需将它们作为常规标签放入，让浏览器完成剩下的工作。它更擅长加载资源和调度资源的加载。特别是自 http/2 以来。如果管道很粗，您加载数据的速度也会快得多。

如果您确实想走这条路，请仅将其用作对用户操作的响应。因此，如果用户滚动画廊并到达没有更多图像的位置，您应该添加更多图像。但没有超时和任何特殊逻辑。只需创建图像或将 src 分配给已创建的 DOM 元素。

如果你使用的是 http/1，你可以使用像 css sprites 这样的东西对一张大图片进行单次下载，并让每个画廊图片都从中获取其来源。