javascript - html没有预加载

Question

我必须在 JQuery 中使用一些画廊（我正在使用 Galleria）。问题是结构是这样的：

<div id="galleria">
   <img src="(...).jpg" />
   <img src="(...).jpg" />
   <img src="(...).jpg" />
   <!-- ... -->
</div>

该插件从该列表中获取所有照片并使用它们。问题：我有很多高质量的照片。在插件可以使用它们之前，它们都是预加载的。有没有办法动态加载图像？（也许，一些新的画廊插件）。

Answer 1

这就是jQuery LazyLoad 插件派上用场的地方:)

Lazy loader 是一个用 JavaScript 编写的 jQuery 插件。它延迟了（长）网页中图像的加载。在用户滚动到它们之前，不会加载视口之外的图像（网页的可见部分）。这与图像预加载相反。

在包含许多大图像的长网页上使用延迟加载可以加快页面加载速度。加载可见图像后，浏览器将处于就绪状态。在某些情况下，它还可以帮助减少服务器负载。

演示页面