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

我有一个大的导航弹出菜单，上面有显示项目的图像

它的工作很好，但页面加载时间有点慢，因为我有更多的图像显示

我的示例代码

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

---

任何想法或链接都很好，谢谢。

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

快速加载图像的一些技巧

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

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



尝试将多个图像合并为一个，并在css中使用css sprite

尝试将图像压缩到gzip，几乎所有现代浏览器都能理解这一点。较小尺寸的图像加载速度更快

避免图像的无效链接（当为无效图像url提供404 for image时）

我将开始向您推荐优化图像。确保尺寸是您需要的，并且CSS不会调整尺寸。还可以使用图像编辑程序对优化进行微调。您可能不需要“最大化”JPG

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

我会避免任何“按需”加载图像的操作，因为用户第一次“调用”图像时会出现延迟

查看可帮助您使用精灵的工具。
ya我在导航中遇到了问题，我的弹出页面中有大约40个图像。该页面将向图像服务器调用40次。谢谢，我目前正在使用精灵，但这并不容易。