当用户将图像滚动到视图中时,如何动态(或懒惰地)加载图像

Question

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

编辑

额外奖励:有人可以解释是否存在"onScrolledIntoView"或HTML元素的类似事件.如果没有,这些插件如何工作？

Answer 1

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

插入

演示

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

这是一个简化的解释:

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

Answer 2

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

jQuery声纳

戴夫在这些幻灯片中谈到了声纳.声纳从幻灯片46开始,而整体"按需加载"讨论在幻灯片33上开始.

Answer 3

我提出了自己的基本方法,似乎工作得很好(到目前为止).一些流行的脚本可能会解决我可能没有想到的十几件事.

注意 - 此解决方案快速且易于实施,但当然对性能不是很好.当然考虑新的十字路口观察由提到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 4

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

我自己从未编程过,但我想这就是它的工作原理.

1. 事件绑定到窗口滚动

   $(window).scroll(myInfinteScrollFunction);
   

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

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

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

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

4. ajax返回一些(最可能是JSON格式的)内容,并将它们传递给loadnig函数.

希望有道理.

Answer 5

您现在可以loading="lazy"在图像和 iframe 上使用，以便推迟加载，直到用户滚动到该元素。

<img src="http://placeimg.com/640/360/any" loading="lazy" />

正如 MDN 中引用的：

Loading 属性元素上的loading 属性（或 上的loading 属性）可用于指示浏览器推迟加载屏幕外的图像/iframe，直到用户滚动到它们附近。

我可以用吗？

您可以在所有现代浏览器上使用图像，但 iframe 到目前为止还处于实验阶段。

<img src="http://placeimg.com/640/360/any" loading="lazy" />

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

.scroll-down {
  height: 100vh;
  background: #037ef3;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Oswald";
  font-size: 2em;
}

.image {
  padding: 2em;
  display: grid;
  place-items: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

提示：

正如您在演示中所看到的，它会创建布局移位，这会在滚动时产生糟糕的用户体验。所以尝试使用占位符。类似的东西是这样的：NextJS Placeholder