javascript - 滚动时加载图像

Question

假设我有一个在网页上转储 1000 张图像的 python 脚本，当用户打开网页时，浏览器会尝试同时打开所有图像，这会减慢页面速度。

有没有办法确保只加载那些位于用户当前视野中的图像，以根据滚动条的位置以某种方式加载它们？

Answer 1

我们称这种设计模式为延迟加载。已经有很多插件实现了它，例如通过滚动加载图像。说 jQuery 的延迟加载插件：

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

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

你可以去他们的网页查看完整的例子和 api。