如何在用户将视图滚动到视图中时dynamic（或延迟）加载图像

我已经注意到这在许多“现代”的网站（如Facebook和谷歌图片search），只有当用户向下滚动页面足够使他们进入可见的视口区域内的折叠下的图像（ 查看源代码，页面显示X数量的<img>标签，但不能直接从服务器获取 ）。 这种技术叫做什么，它是如何工作的，以及在多less浏览器中工作。 有没有一个jQuery插件，可以用最less的代码来实现这个行为。

编辑

奖金：有人可以解释是否有一个“onScrolledIntoView”或类似的事件的HTML元素。 如果不是，这些插件如何工作？

Answer 1

这里的一些答案是无限的页面。 萨尔曼要求的是图像的延迟加载。

插入

演示

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

这是一个简单的解释：

1. 查找窗口大小并查找所有图像的位置及其大小
2. 如果图像不在窗口大小内，请将其replace为相同大小的占位符
3. 当用户向下滚动时，图像的位置<滚动+窗口高度，图像被加载

Answer 2

美国在线的Dave Artz去年在波士顿jQuery会议上做了一个关于优化的大讨论。 美国在线根据滚动位置使用称为Sonar的工具进行按需加载。 检查代码，了解如何将scrollTop（和其他）与元素偏移量进行比较，以检测元素的全部或部分是否可见。

jQuery声纳

戴夫在这些幻灯片中谈到声纳。 声纳从幻灯片46开始，而整个“按需加载”讨论从幻灯片33开始。

Answer 3

这里有一个相当不错的无限滚动插件

我从来没有编写过一个，但我可以想象这是如何工作的。

1. 一个事件绑定到窗口滚动

    $(window).scroll(myInfinteScrollFunction); 

2. 被调用函数检查scroll top是否大于窗口大小

    function myInfiniteScrollFunction() { if($(window).scrollTop() == $(window).height()) makeAjaxRequest(); } 

3. 发出一个AJAX请求，指定从哪个结果开始，抓取多less个数据，以及其他必要的参数。

    $.ajax({ type: "POST", url: "myAjaxFile.php", data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" }, success: myInfiniteLoadFunction(msg) }); 

4. ajax返回一些（最可能是JSON格式的）内容，并将它们传递给loadnig函数。

希望是有道理的。

Answer 4

我想出了自己的基本方法，似乎工作得很好（到目前为止）。 一些stream行的脚本可能有十几件事我没有想到。

JQuery

 $(window).scroll(function() { $.each($('img'), function() { if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) { var source = $(this).data('src'); $(this).attr('src', source); $(this).removeAttr('data-src'); } }) }) 

示例html代码

 <div> <img src="" data-src="pathtoyour/image1.jpg"> <img src="" data-src="pathtoyour/image2.jpg"> <img src="" data-src="pathtoyour/image3.jpg"> </div> 

解释

当页面滚动时，页面上的每个图像被检查。

$(this).attr('data-src') – 如果图像具有属性data-src

这些图像距窗口底部有多远

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

调整+100为你喜欢的任何（例如 – 100）

var source = $(this).data('src'); – 获取data-src= aka图片url的值

$(this).attr('src', source); – 把这个值放入src=

$(this).removeAttr('data-src'); – 删除data-src属性（所以你的浏览器不会浪费已经加载的图像的资源）

添加到现有的代码

要转换你的html，在编辑器中search并replacesrc=" with src="" data-src="

Answer 5

图像延迟加载的瑞士军刀是YUI的ImageLoader 。

因为这个问题不仅仅是看滚动的位置。

Answer 6

每次调用getBoundingClientRect（）都会强制浏览器重新布局整个页面，并会在您的网站中引入相当多的内容，因此通过将侦听器附加到滚动事件或使用setInterval来延迟加载图像是非常不起作用的。

使用Lozad.js （只有569字节，没有依赖关系），它使用InteractionObserver来执行延迟加载图像。

Answer 7

我使用jQuery懒惰 。 我花了大约10分钟时间来testing，一个小时或两个小时添加到我的某个网站（ CampusCube ）上的大多数图像链接。 我对开发人员没有（无/零）任何关系，但为我节省了很多时间，基本上帮助我们改善了移动用户的跳出率，我很感激。