加载具有大图像的DIV会停止加载页面的其余部分

Question

我是http://concretetoboggan.uwaterloo.ca的网站管理员和首次网页设计师，所以我偶然发现了CSS。我一直有一个特殊的问题。

如果您转到该链接（第一次），则在加载页面其余部分之前，主幻灯片上的页面会停留2-3秒。它真的让人分心，似乎很容易修复，但我无法解决它。

这是该网站的网络时间线，正如您所看到的，Firebug显示了一个神秘的差距。

页面执行的事件序列（应该是）：

1. 在页面开头加载jQuery
2. 加载页面
3. 显示幻灯片显示的第一张图片（其余图片被加载到带有“隐藏”类的div中，可能是浏览器执行此异步）
4. 继续加载页面
5. 删除DOM ready上的“隐藏”类
6. 在DOM ready上加载jQuery bxSlider

每张幻灯片幻灯片都由一个内部带有img标签的div和一个绝对位于底部的标题栏子div组成：0。

我已经厌倦了以下优化，这有点帮助：

• 删除幻灯片下方加载的表格（似乎加快了速度，仍然停滞不前）
• 减少加载图像的大小（加快速度，但仍然停滞不动）
• 将img'src'放在'dsrc'属性中，然后在DOM ready（仍然停止）上重新分配
• 将图像放在后台：div的CSS（不需要的布局问题）

Answer 1

通常情况下，“拖延”是由于页面没有足够的信息来计算布局，因为它在加载图像之前不知道图像的尺寸。

如果您知道图片的尺寸，则可以通过更改<img>代码来避免此特定问题。

<img src="myimage.jpg"/>

...到...

<img src="myimage.jpg" width="640" height="480"/>

......或者他们碰巧发生的一切。

但是，页面可能停滞不前还有其他原因。

---

<强>更新

您有时可以采取另一项措施来加快速度：如果您使用<script>标记加载一个不需要呈现页面的脚本，但仅用于处理后续用户输入，您可以通过添加defer属性将脚本加载推迟到页面呈现之后，例如改变...

<script src="http://someslowsite.com/somescript.js">

...到...

<script src="http://someslowsite.com/somescript.js" defer="defer">

...但是如果您需要脚本来呈现页面，那么这是不可能的。如果您认为用户可以比第三方网站更快地从您的网站加载脚本，那么请复制并自行托管。