Question

我有一个大型导航弹出菜单，其中包含显示项目的图像。

它的工作正常，但页面加载时间稍慢，因为我有更多的图像要显示。

我的示例代码

<ul>
<li>
<a>Cars<a/>
<div class="flyOutMenu">
<img src="img/car1.png" />
<div>Mustang</div>
<div>Honda</div>
<div>BMW</div>
</div>
<li>
</ul>

导航可以有40张图片

我可以通过jquery更快地加载图像吗？或处理程序

任何想法或链接都会非常感谢你。

Answer 1

更快加载图片的一些提示。

始终在图像标记中定义Alt，Height和Width属性。这有助于加快图像加载速度。
```
 <img src="img/car1.png" alt="myimage"  height="60" width="60"/>
```
尝试将多个图像合并为一个并在css中使用时使用css sprite
尝试将图像压缩到gzip，几乎所有现代浏览器都能理解这一点。尺寸较小的图像加载速度会更快。
避免无效的图片链接（为无效图片网址提供404图片时）。

Answer 2

我将开始建议你优化图像。确保这些描述是您需要的，并且CSS没有调整它们的大小。还可以使用图像编辑程序来微调优化。您可能不需要“最大化”的jpgs。

另请查看sprites图片。 1大型下载通常比许多小型下载更快。特别是40张图片！

我会避免任何“按需”加载图像的内容，因为用户“第一次”调用它时会滞后

请参阅http://csssprites.com/了解可能对精灵有所帮助的工具。

Answer 3

制作div的图像背景图像。 div将快速加载，而图像将在带宽允许后进入。在加载图像时在图像div上放置背景颜色，并为图像div设置宽度和高度。

<ul>
  <li>
    <a>Cars<a/>
    <div class="flyOutMenu">
      <div style="background-image: url(img/car1.png); 
           height: 200px; width: 200px; background-color: black;" />
      <div>Mustang</div>
      <div>Honda</div>
      <div>BMW</div>
    </div>
  <li>
</ul>

这不会使图像加载速度加快，但允许用户在图像到达之前开始与页面进行交互。

如果您正在寻找预加载图像的方法，可以使用css，javascript或ajax调用。这是一个很好的链接：http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

将图像异步加载到导航弹出按钮或加载图像的最佳方式

3 个答案: