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

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

编辑

奖励:有人可以解释是否有&#34; onScrolledIntoView&#34; 或HTML元素的类似事件。 如果没有,这些插件如何工作?

Salman A asked 2019-08-13T19:59:42Z
8个解决方案
63 votes

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

插入

演示

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

这是一个简化的解释:

  1. 查找窗口大小并找到所有图像的位置及其大小
  2. 如果图像不在窗口大小内,请将其替换为相同大小的占位符
  3. 当用户向下滚动时,图像的位置&lt; 滚动+窗口高度,图像被加载
Alec Smart answered 2019-08-13T20:00:33Z
10 votes

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

jQuery声纳

戴夫在这些幻灯片中谈到了声纳。 Sonar从幻灯片46开始,而整体&#34;按需加载&#34; 幻灯片33开始讨论。

Annika Backstrom answered 2019-08-13T20:01:11Z
5 votes

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

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

  1. 事件绑定到窗口滚动

    $.ajax({
        type: "POST",
        url:  "myAjaxFile.php",
        data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
        success: myInfiniteLoadFunction(msg)
    });
    
  2. 被调用的函数检查滚动顶部是否大于窗口大小

    $.ajax({
        type: "POST",
        url:  "myAjaxFile.php",
        data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
        success: myInfiniteLoadFunction(msg)
    });
    
  3. 发出一个AJAX请求,指定从哪个结果#开始,要抓取多少,以及数据拉取所需的任何其他参数。

    $.ajax({
        type: "POST",
        url:  "myAjaxFile.php",
        data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
        success: myInfiniteLoadFunction(msg)
    });
    
  4. ajax返回一些(最可能是JSON格式的)内容,并将它们传递给加载函数。

希望有道理。

jwegner answered 2019-08-13T20:02:24Z
5 votes

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

注意 - 此解决方案快速且易于实施,但当然对性能不是很好。 绝对查看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>

解释

滚动页面时,会检查页面上的每个图像。

src=" - 如果图像具有属性src="" data-src="

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

src="

将+ 100调整为你喜欢的任何东西(例如100)

src=" - 获取值src="" data-src="又名图片网址

src=" - 将该值放入src="" data-src="

src=" - 删除data-src属性(这样您的浏览器就不会浪费资源来处理已经加载的图像)

添加到现有代码

要转换您的html,请在编辑器中搜索并替换src="src="" data-src="

Hastig Zusammenstellen answered 2019-08-13T20:04:27Z
2 votes

通过将侦听器附加到滚动事件或通过使用setInterval来延迟加载图像非常不具有性能,因为每次调用getBoundingClientRect()都会强制浏览器重新布局整个页面,并会为您的网站带来可观的数据。

使用Lozad.js(只有569个字节,没有依赖项),它使用IntersectionObserver来延迟加载图像。

Apoorv Saxena answered 2019-08-13T20:04:59Z
1 votes

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

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

Arnaud Meuret answered 2019-08-13T20:05:30Z
0 votes

此链接适用于我演示

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标签上调用插件并指定其持续时间     fadeIn效果,因为您的图像进入视野

$('img').loadScroll(500); // in ms
vebs answered 2019-08-13T20:06:17Z
0 votes

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

Cliff Ribaudo answered 2019-08-13T20:06:42Z
translate from https://stackoverflow.com:/questions/5117421/how-to-load-images-dynamically-or-lazily-when-users-scrolls-them-into-view