修改

Question

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

修改

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

Answer 1

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

Plugin

Demo

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

这是一个简化的解释：

查找窗口大小并找到所有图像的位置及其大小
如果图像不在窗口大小范围内，请将其替换为相同大小的占位符
当用户向下滚动时，图像的位置＆lt;滚动+窗口高度，图像已加载

Answer 2

去年，AOL的Dave Artz在jQuery Conference Boston举行了一场关于优化的精彩演讲。 AOL使用一种名为Sonar的工具，根据滚动位置进行按需加载。检查代码，了解它如何将scrollTop（和其他）与元素偏移进行比较，以检测元素的部分或全部是否可见。

jQuery Sonar

戴夫在these slides谈到了声纳。 Sonar从幻灯片46开始，而整体“按需加载”讨论从幻灯片33开始。

Answer 3

有一个非常漂亮的无限滚动插件here

我自己从未编程过，但我想这就是它的工作方式。

事件绑定到窗口滚动

$(window).scroll(myInfinteScrollFunction);

被调用函数检查滚动顶部是否大于窗口大小

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

发出一个AJAX请求，指定从哪个结果＃开始，要抓取多少，以及数据拉取所需的任何其他参数。

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

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

希望这是有道理的。

Answer 4

我提出了自己的基本方法，似乎工作正常（到目前为止）。一些流行的脚本可能会解决我可能没有想到的十几件事。

注意 - 此解决方案快速且易于实施，但对性能而言当然不是很好。如果性能有问题，请务必查看Intersection Observer提到的新Apoorv并由developers.google解释。

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=又名图片网址

的值

$(this).attr('src', source); - 将该值放入src=

$(this).removeAttr('data-src'); - 删除data-src属性（这样您的浏览器就不会浪费资源来处理已经加载的图像）

添加到现有代码

要转换html，请在编辑器中搜索并将src="替换为src="" data-src="

Answer 5

通过将侦听器附加到滚动事件或使用setInterval来延迟加载图像是非常不具有性能的，因为每次调用getBoundingClientRect（）都会强制浏览器re-layout整个页面，并会为您的网站带来大量的jank 。

使用 Lozad.js （只有569个字节，没有依赖项），使用IntersectionObserver延迟加载图片。

Answer 6

瑞士军刀的图像延迟加载是YUI＆＃39; ImageLoader。

因为这个问题比单纯观看滚动位置还要多。

Answer 7

我正在使用jQuery Lazy。我花了大约10分钟测试一两个小时来添加到我的一个网站上的大多数图像链接（CollegeCarePackages.com）。我对开发者有任何形式的 NO（无/零）关系，但它为我节省了大量时间，基本上有助于提高移动用户的跳出率，我很感激。

Answer 8

此链接适用于我demo

1.在jQuery库之后但在关闭正文标记之前加载jQuery loadScroll插件。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2.使用Html5 data-src属性将图像添加到您的网页中。您还可以使用常规img的src属性插入占位符。

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3.在img标签上调用插件并指定其持续时间当您的图像进入视图时淡出效果

$('img').loadScroll(500); // in ms

当用户将图像滚动到视图中时，如何动态（或懒惰地）加载图像

修改

8 个答案: