Question

我有一个来自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(""));

}

问题是，当我点击列表显示所有人时需要一段时间来实际加载所有图片，因此它显示每个图像的丑陋浏览器空占位符框，直到每个图像逐个加载

无论如何，当我得到初始列表时，我可以在后台加载这些图像，所以当我点击“显示”链接时，它们会很快显示出来吗？

Answer 1

如果首先将它们显示的区域包裹在div中visibility: hidden，然后使用该链接将其更改为visibilty: visible呢？（最好是增加/删除一个班级）。使用hidden意味着空间仍然被占用而不是none而不会这样做。您仍然需要创建尺寸合适的区域，但如果您还不知道图像尺寸，则无法保留空间。

Answer 2

为什么不在最初获取图像链接时执行您现在正在进行的DOM操作？只需将它们弹出一个隐藏元素，直到用户决定全部查看它们，此时ShowAllPeople()只会使元素可见。

Answer 3

我相信“经典”方法是让我们在abs上定位“显示”视口外的图像。例如，在-10000 0位置。

您还可以使用img元素“onload”事件。见SO Q

您还应进行调查以确保您的图像服务器没有减速。我建议您将图像存储在Amazon S3上。我这样做，他们既快又便宜。

最后，您应该重新检查您的用户体验。例如，在加载图像时显示一些动画。或使用gallery or carousel显示图像。优点是，如果用户一次只能看到一个或两个图像，它似乎更快。 - 因为您可以在后台预加载其他图像，直到用户（稍后）按下“下一步”按钮。

加载一组图片以便稍后显示的最佳方法是什么

3 个答案: