滚动时如何下载图像？

Posted 2023-03-05

【中文标题】滚动时如何下载图像？

【英文标题】：How are the images downloaded on when you scroll?

【发布时间】：2011-10-01 07:59:58

【问题描述】：

如何实现仅在滚动到该内容后才下载图像的效果。因此，如果您有一个大页面并且页面底部有图像，除非您滚动到该内容，否则它们永远不会被下载。如果还是不清楚，请看imdb：

http://www.imdb.com/title/tt1385826/

让页面加载，然后滚动到Cast 部分。只有当您滚动浏览器请求图像并下载时，您才会看到。我是否必须为页面上的每张图片编写任何特殊代码才能实现这一点？

【参考方案1】：

我认为你必须使用 javascript；当移动网页的视口时，您可以计算图片何时进入视野。届时可以将占位符图片的路径换成正确的图片。

Here's 有一些解释的页面：他们使用this jQuery 插件

【讨论】：

谢谢，但是你能给我一个同样的 Jquery 插件吗？我使用 Jquery。

@Anthony 有 this 一个，但它看起来不再正常工作了。

我编辑了我的答案，因为我链接到的第一页不正确。我在答案中添加了一个插件示例

【参考方案2】：

有一个名为 LazyLoad 的 jQuery 插件，看起来原作者已经停止开发，但是 GitHub 上有几个 pull request 看起来他们修复了作者提到的问题

http://www.appelsiini.net/projects/lazyload

https://github.com/tuupola/jquery_lazyload/pulls

【参考方案3】：

您编写的代码不是一次下载所有图像，而是只下载一个页面可以显示的数量（比如 20 个）。然后在滚动时（到达页面底部），您可以进行 ajax 调用以加载接下来的 20 张图像并将它们附加到现有的 html 页面。