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

【问题标题】：Wait for everything to load before showing在显示之前等待所有内容加载
【发布时间】：2013-01-02 15:46:55
【问题描述】：

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

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

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

谁能给我一些好的建议？

【问题讨论】：

标签： jquery

【解决方案1】：

这样就好了。然而，与其使用 jQuery 来隐藏 <div id="main"> 元素，不如使用 CSS 属性：

#main {
    display: none;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

跟进：这是一个 lazy-load plugin 用于 jQuery 的 does what I'm talking about。（基本上是 Facebook 用它的新闻提要做什么）

【讨论】：

Brad Christie，感谢您抽出宝贵时间给出答案。它不是真正的 97 个缩略图/图标的大小，有时会延迟。我流畅地显示所有缩略图/图标的问题的原因是基于 rahter mysql。图像不在 mysql 中，而是定义应该显示哪些缩略图/图标，其中被定义 bij mysql 数据库中的一些设置......所以，97 个查询 :-) 但我已经在寻找更好的了系统:-)
用户，MySQL 查询应该在页面被放弃时执行，不是吗？也就是说，延迟应该甚至在 HTML 可见和/或呈现之前，这使得基于加载延迟的内容隐藏和显示无关紧要？（除非我误解了这个问题）。
好吧，我用 php 做了一个 while 循环。而（$i
@Nomistake: SELECT icon FROM db WHERE square_id >= 0 AND square_id < 97 ORDER BY square_id?
是的，类似的东西 :-) 有点不同，因为并非所有图标都位于同一个文件夹中等...但我会尝试一下...稍后:-)