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

Question

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

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

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

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

Answer 1

那没关系。但是，不是使用jQuery最初隐藏<div id="main">元素，而是使用CSS属性：

#main {
    display: none;
}

Answer 2

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

这样做

检查以下链接中的答案将向您展示如何。

https://stackoverflow.com/a/13982980/1406211 - 包含演示

Answer 3

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

否则，假设您正在关注标准HTML并为图像预加载提供宽度/高度，我不会花费太多精力来“暂停UI”直到它们已加载 - 您的布局应该保留在整个负载期间，97个图像（假设某种缩略图）不应该按照今天的标准花费太长时间。

跟进：这是jQuery的lazy-load plugin does what I'm talking about。 （基本上是Facebook用新闻提供的功能）