1

我是http://concretetoboggan.uwaterloo.ca的网站管理员，并且是第一次做网页设计师，所以我在 CSS 上有点磕磕绊绊。我一直有一个奇怪的问题。

如果您访问该链接（第一次），则页面会在主幻灯片上停顿 2-3 秒，然后再加载页面的其余部分。这真的很让人分心，而且看起来很容易修复，但我无法修复它。

这是该站点的网络时间线，如您所见，Firebug 显示出一个神秘的差距。 在此处输入图像描述

页面执行的事件顺序是（假设是）：

  1. 在页面开头加载 jQuery
  2. 加载页面
  3. 显示幻灯片的第一张图像（其余图像加载到具有“隐藏”类的 div 中，大概是浏览器异步执行此操作）
  4. 继续加载页面
  5. 移除 DOM 上的“隐藏”类
  6. 在 DOM 上加载 jQuery bxSlider 准备就绪

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

我已经厌倦了以下优化，这些优化几乎没有帮助：

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

1 回答 1

0

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

如果您碰巧知道图像的尺寸，则可以通过将<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">

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

于 2013-04-13T14:02:13.253 回答