css - 加载带有大图像的 DIV 会延迟页面其余部分的加载

Question

我是 http://concretetoboggan.uwaterloo.ca 的站长和一个新的网页设计师，所以我在 CSS 中有点跌跌撞撞。我遇到了一个特殊的问题。

如果您(第一次)访问该链接，在加载页面的其余部分之前，该页面会在主幻灯片上明显停滞 2-3 秒。它确实让人分心，而且看起来很容易修复，但我无法修复它。

这是站点的网络时间线，如您所见，Firebug 显示了一个神秘的缺口。

页面执行的事件顺序是(应该是):

1. 在页面开始加载 jQuery
2. 加载页面
3. 显示幻灯片的第一张图片(其余图片使用“隐藏”类加载到 div 中，大概是浏览器执行此异步操作)
4. 继续加载页面
5. 删除 DOM 上的“隐藏”类就绪
6. 在 DOM 上加载 jQuery bxSlider 就绪

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

我厌倦了以下优化，这些优化略有帮助:

• 删除幻灯片下方加载的表格(似乎加快了速度，但仍然停滞不前)
• 减小加载图像的大小(加快速度，但仍然停顿)
• 将 img 的“src”放入“dsrc”属性中，然后在 DOM 就绪时重新分配它(仍然停顿)
• 将图片放在背景中: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">

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