当用户将图像滚动到视图中时如何动态(或延迟)加载图像 [英] How to load images dynamically (or lazily) when users scrolls them into view

问题描述

我在许多现代"网站(例如 facebook 和 google 图像搜索)中注意到了这一点，只有当用户向下滚动页面足以将它们带入可见视区区域(on查看源代码，页面显示 X 个 标签，但它们不会立即从服务器获取).这种技术叫什么，它是如何工作的以及它在多少浏览器中工作.是否有 jQuery 插件可以用最少的代码实现这种行为.

I've noticed this in numerous "modern" websites (e.g. facebook and google image search) where the images below the fold load only when user scrolls down the page enough to bring them inside the visible viewport region (upon view source, the page shows X number of <img> tags but they are not fetched from the server straight away). What is this technique called, how does it work and in how many browsers does it work. And is there a jQuery plugin that can achieve this behavior with minimum coding.

奖励:有人可以解释一下 HTML 元素是否有onScrolledIntoView"或类似事件.如果没有，这些插件如何工作?

Bonus: can someone explain if there is a "onScrolledIntoView" or similar event for HTML elements. If not, how do these plugins work?

推荐答案

这里的一些答案是针对无限页面的.Salman 要求的是延迟加载图像.

Some of the answers here are for infinite page. What Salman is asking is lazy loading of images.

插件

演示

这些插件是如何工作的?

这是一个简单的解释:

1. 查找窗口大小并找到所有图像的位置及其大小
2. 如果图像不在窗口大小范围内，请用相同大小的占位符替换
3. 当用户向下滚动时，图像的位置
4. 滚动+窗口高度，图片加载完毕

这篇关于当用户将图像滚动到视图中时如何动态(或延迟)加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！