等待所有内容加载完毕后再显示

Question

我想知道这种方式是否是确保所有图片等在#main div显示前加载完毕的好方法？

在#main div中，我需要加载97个图片，但有时速度太慢，所以会显示方框，然后才显示图片。

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

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

- Nomistake

---

我会在 CSS 中默认隐藏 #main，但除此之外，这个看起来还是比较合理的。 - Mike Brant

$(window).load() 不应该嵌套在 $(document).ready() 内部。 - David Thomas

@DavidThomas：为什么不行？$(window).load()在$(document).ready()之后执行，所以……？请解释一下 :-) - Nomistake

Answer 1

没问题。不过，与其使用jQuery来最初隐藏<div id="main">元素，你可以使用CSS属性：

#main {
    display: none;
}

- Anthony Grist

---

非常感谢，我想我会按照您的建议进行修改，以使其更加简洁！ - Nomistake

Answer 2

您可以在启动页面后预加载所有图像，然后在它们全部加载完毕后隐藏启动页面。我目前正在为73张图片（18mb）执行此操作。

请查看以下链接中的答案，它将向您展示如何操作。 https://dev59.com/XmzXa4cB1Zd3GeqPSlyF#13982980 - 包含演示

- str11

Answer 3

你可以考虑使用延迟加载，仅加载视口（可见的部分，无需滚动），然后当用户滚动时加载其他图片。这也有助于减少带宽消耗。

否则，假设你遵循标准HTML并为图像预加载提供宽度/高度，我不会花太多精力在“暂停UI”上，直到它们加载完成——在当前标准下，你的布局应该在整个加载期间保持完好，并且97张图片（假设是某种缩略图）不应该需要太长时间。

跟进：这里是一个jQuery的懒加载插件，可以实现我所说的内容。（基本上就是Facebook在其新闻推送中所做的）

- Brad Christie

---

Brad Christie，感谢您抽出时间给出答案。 导致我显示所有缩略图/图标不流畅的问题是基于mysql的。这与97个缩略图/图标的大小并无关系。 图片并不在mysql中，但是通过mysql数据库中的某些设置来定义应该在哪个<img>中显示哪些缩略图/图标...所以需要97个查询 :-) 但我已经在寻找更好的系统了 :-) - Nomistake

用户，MySQL查询应该在页面提交时执行，对吧？也就是说，延迟应该在HTML可见和/或渲染之前，这使得基于加载延迟隐藏和显示内容变得无关紧要（除非我误解了问题）。 - Brad Christie

嗯，我用PHP做了一个while循环。while ($i < 97)。 每次循环时，我会查询数据库以获取与当前$i数字相等的图标图像的名称（SELECT icon from db WHERE square_id='".$i."' LIMIT 1），并生成一个包含图像的div...（这是因为可以通过CMS管理97个图标的布局）目前，我想不到其他方法，但随着我的学习...也许...:-) 也许生成一个包含图像的数组... - Nomistake

@Nomistake：SELECT icon FROM db WHERE square_id >= 0 AND square_id < 97 ORDER BY square_id？ - Brad Christie

是的，有点像那样 :-) 但有些不同，因为并不是所有的图标都在同一个文件夹中...但我会试一下...稍后再说 :-) - Nomistake