jquery - 在显示之前等待所有内容加载

Question

我想知道这是否是确保在显示#main div 之前加载所有图像等的好方法？

在#main div 中，我必须加载 97 张图像，有时速度不够快，因此它会在显示图像之前显示正方形。

$(document).ready(function(){
    $('#main').hide();
    $(window).load(function(){
        $('#main').show();
    });
});

有人可以给我一些好的建议吗？

score 1 · Accepted Answer

那会好的。<div id="main">但是，您可以使用 CSS 属性，而不是使用 jQuery 来隐藏元素：

#main {
    display: none;
}

score 1 · Accepted Answer

您可以预先加载启动页面后面的所有图像，然后在全部加载后隐藏启动页面。我目前为 73 张图片 (18mb)

检查下面链接中的答案将告诉你如何。

score 0 · Accepted Answer

您可以查看延迟加载并仅加载视口（没有任何滚动的可见部分），然后（如果/何时）用户滚动其他图像显示。还将减少带宽消耗。

否则，假设您遵循标准 HTML 并为图像预加载提供宽度/高度，我不会在“暂停 UI”上投入太多精力，直到它们加载——您的布局应该保持原样在整个加载过程中，97 张图片（假设是某种缩略图）按照今天的标准应该不会花费太长时间。

后续行动：这是一个用于 jQuery的延迟加载插件，可以完成我所说的。（基本上是 Facebook 用它的新闻提要做什么）

3 回答 3