javascript - 页面加载时不要加载某些图像

Question

我有一个网页，一个简单的 index.php。使用 jquery，我设法设置了 5 个单独的菜单。不幸的是，我必须在我的画廊中使用大约 150 个缩略图，并且每当我重新加载页面时，所有这些图片也需要加载，并且需要大约 5-6 秒。我尝试设置 Lazy Load jquery 插件，但它对我不起作用（我猜它是为滚动网站编写的......而我的不是那样）。

我正在考虑编写一个脚本，以防止所有这些图像加载，但我什至不知道如何开始。我的观点是，只有当用户单击图库链接（尽管这是相同的 php 页面）时，才应该加载缩略图。

Answer 1

只需将图像的 url 放在一个单独的属性中，例如：

<img data-realsrc='realsrc'>

然后当你需要加载它们时：

$(img).attr('src', $(img).data('realsrc'));

以上是一般的实现原理。对于一个真实的例子，看看小提琴：http: //jsfiddle.net/3UrUZ/

顺便说一句，做你所做的并不是一个好习惯。我建议你使用CSS Sprites而不是很多图像。:) 还有很多精灵生成器可以帮助创建它们。