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

简短的回答是 no 。从我收集到的内容，您希望通过每100毫秒加载一个图像来单独加载一堆图像。

这意味着如果您有20张图片，则需要花费2秒钟加载，如果您有100张图片，则需要花费10秒钟加载。我敢打赌，在一个不错的连接上，任何浏览器都可以击败它。

我不想在这方面先占用浏览器。只需将它们作为常规标签放入，让浏览器完成其余的工作。它更擅长于加载资源和安排资源加载。特别是自http / 2以来。如果有一个胖管你也可以更快地加载这些数据。

如果您确实想要使用此路线，请仅将其用作对用户操作的回复。因此，如果用户滚动浏览图库并到达没有更多图像的点，您应该添加更多图像。但没有超时和任何特殊的逻辑。只需创建图像或将src指定给已创建的DOM元素。

如果您使用的是http / 1，则可以使用类似css sprites的内容来下载大型图片，并让每个图库图像都从中获取。

在js中异步加载图像的可能问题

1 个答案: