javascript - 将图像异步加载到导航弹出窗口或加载图像的最佳方式

标签 javascript jquery asp.net

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

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

我的示例代码

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

任何想法或链接都会很棒,谢谢。

最佳答案

我将开始建议您优化图像。确保尺寸符合您的需要,并且 CSS 不会调整它们的大小。还可以使用图像编辑程序来微调优化。您可能不需要“最大化”jpg。

另请参阅sprites对于图像。 1 大容量下载通常比许多小容量下载要快。特别是 40 张图片!

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

参见http://csssprites.com/寻找可以帮助您处理 Sprite 的工具。

关于javascript - 将图像异步加载到导航弹出窗口或加载图像的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18710820/

相关文章:

javascript - 将 JSON 操作为表布局的特定行

javascript - 为 React 可重用组件设计 Redux 操作和化简器

javascript - 回复从jquery到rails的帖子

javascript - 如何确保在实时 Ajax 搜索中获取最新搜索结果

javascript - 防止通过另一个元素的触发点击关闭导航栏

asp.net - 访问 linux 托管的 ASP.NET Core 2.x webapp(无 nginx)

asp.net - project.json 中的 'dependencies' 和 'frameworkAssemblies' 有什么区别?

javascript - 在 $.getJSON 函数中测试 bool 变量时出现奇怪的结果

c# - 如何解决 IURLHelper 的问题(在 startup.cs 上添加单例不起作用)ASP.NET Core 2.2

jquery - 获取上下文菜单项的值