加载一组稍后要显示的图片的最佳方式是什么?

What is the best way to load a set of pictures to be shown later

本文关键字：最佳 方式 是什么 显示 一组 加载      更新时间：2023-09-26

我有一个从ajax调用返回一堆图像链接的回调。我将这个数组存储在一个变量中(称为fullPeopleList)，然后在单击链接时，在DOM中显示所有图像。像这样:

function ShowAllPeople() {
var html = [];
$.each(fullPeopleList, function (i, person) {
    html.push("<img title='" + person.Name + "' height='45' width='45' src='" + person.SafePicLink + "' /> ");
});
html.push("&nbsp; <a id='showTop' href=''>Show Less ...");
$("#people").html(html.join(""));

}

问题是当我点击列表显示所有人的时候需要一段时间才能真正加载所有的图片所以它会显示一个丑陋的浏览器空白占位符框直到图片被逐个加载

当我得到初始列表时，我是否可以在后台加载这些图像，所以当我点击"显示"链接时，它们很快就会显示出来?

如何将他们在div中显示的区域先包装为visibility: hidden，然后使用链接将其更改为visibilty: visible呢?(最好是通过添加/删除类)。使用hidden意味着空间仍然被占用，而none不会这样做。你仍然需要创建合适大小的区域，因为如果你不知道图像的大小(还)，你就不能保留空间。

当最初获得图像链接时，为什么不直接做您现在正在做的DOM操作呢?只需将它们弹出到一个隐藏元素中，直到用户决定查看它们为止，此时ShowAllPeople()只会使元素可见。

我认为，"经典"的方法是我们的abs定位，以"显示"视窗外的图像。例如在- 100000位置

你也可以使用img元素的"onload"事件。参见SO Q

您还应该调查以确保您的图像服务器的没有减速。我建议您将图像存储在Amazon S3上。我有，而且它们又快又便宜。

最后，你应该重新审视你的用户体验。例如，在加载图像时显示一些动画。或者使用图库或旋转木马显示图像。这样做的好处是，如果用户一次只看到一个或两个图像，那么看起来会更快。-因为你可以在后台预加载额外的图像，直到用户(稍后)按下下一步按钮。

相关文章：