0

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

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

我的示例代码

<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 更快地加载图像吗？或处理程序

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

4

3 回答 3

1

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

  1. 始终在图像标签中定义 Alt、Height 和 Width 属性。这有助于更快地加载图像。

     <img src="img/car1.png" alt="myimage"  height="60" width="60"/>

  2. 尝试将多张图像合并为一张并在 css 中使用时使用 css sprite

  3. 尝试将图像压缩为 gzip，几乎所有现代浏览器都可以理解。较小尺寸的图像将加载更快。

  4. 避免图像的无效链接（当为无效图像 url 的图像提供 404 时。）

于 2013-09-10T05:06:49.843 回答
1

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

还要查看图像的精灵。1 大型下载通常比许多小型下载要快。特别是40张图片！

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

请参阅http://csssprites.com/了解可以帮助您处理 sprite 的工具。

于 2013-09-10T05:09:27.113 回答
0

将图像作为 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/

于 2013-09-10T05:04:34.507 回答