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

Question 1

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

编辑

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

Question 2

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

插入

演示版

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

这是一个简化的解释：

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

Question 3

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

jQuery声纳

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

Question 4

我想出了自己的基本方法（到目前为止）似乎还不错。我可能没有想到一些流行脚本解决的许多问题。

注意 -此解决方案快速且易于实施，但性能当然不佳。当然考虑新的十字路口观察由提到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="

Question 5

有一个非常不错的无限滚动插件这里

我从来没有自己编程过，但是我可以想象这是如何工作的。

事件绑定到窗口滚动

$(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函数。

希望有道理。

Question 6

通过将侦听器附加到滚动事件或通过使用setInterval来延迟加载图像是非常无效的，因为每次对getBoundingClientRect（）的调用都会迫使浏览器重新布局整个页面，这将给您的网站带来很大的麻烦。

使用Lozad.js（仅有569个字节，没有依赖性），该文件使用IntersectionObserver懒惰地加载图像。

Question 7

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

因为除了简单地查看滚动位置之外，此问题还有更多。

Question 8

此链接为我工作演示

1.在jQuery库之后但在结束body标签之前加载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

Question 9

我正在使用jQuery Lazy。我花了大约10分钟的时间进行测试，花了一两个小时才将其添加到我的一个网站（CollegeCarePackages.com）上的大多数图像链接中。我与开发人员之间没有任何关系（无/零），但它节省了我很多时间，并且基本上帮助我们提高了移动用户的跳出率，对此我表示感谢。