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

问题描述

我在许多现代网站（例如脸书和谷歌图片搜索）中注意到了这一点，只有当用户向下滚动页面足以将它们放入可见视口区域内时，才会加载折叠下的图像（ upon查看源代码，页面显示 X 编号的< img> 标签，但不会立即从服务器中提取）。这种技术叫做什么，它是如何工作的，以及它有多少浏览器工作。有没有一个jQuery插件，可以用最少的代码实现这种行为。

编辑

解释是否存在HTML元素的onScrolledIntoView或类似事件。如果没有，这些插件是如何工作的？

解决方案

这里的一些答案适用于无限页面。 Salman要求的是延迟加载图像。

插件

演示

编辑：这些插件如何工作？

这是一个简单的解释：

1. 查找窗口大小并查找所有图像的位置及其大小
   
2. 如果图像不在窗口大小范围内，将其替换为相同大小的占位符


3. 当用户向下滚动时，图像的位置< / li>滚动+窗口高度，图像被加载
   

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.

Edit

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

解决方案

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

Plugin

Demo

EDIT: How do these plugins work?

This is a simplified explanation:

1. Find window size and find the position of all images and their sizes
2. If the image is not within the window size, replace it with a placeholder of same size
3. When user scrolls down, and position of image < scroll + window height, the image is loaded

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