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

I've noticed this in numerous "modern" websites (e.g. facebook and google image search) where the images below the fold load only when user scrolls down the page enough to bring them inside the visible viewport region (upon view source, the page shows X number of <img> tags but they are not fetched from the server straight away). What is this technique called, how does it work and in how many browsers does it work. And is there a jQuery plugin that can achieve this behavior with minimum coding.

我注意到这个在众多“现代”网站(如facebook和谷歌图片搜索),下面的图片褶皱负载只有当用户向下滚动页面,足以让他们在可见的窗口区域(查看源代码后,页面显示X < img >标记,但他们不是直接从服务器获取)。这个技术叫什么?它是如何工作的?它在多少个浏览器中工作?是否有jQuery插件可以用最少的编码来实现这种行为?

Edit

Bonus: can someone explain if there is a "onScrolledIntoView" or similar event for HTML elements. If not, how do these plugins work?

额外的好处:如果有一个“onScrolledIntoView”或类似的事件用于HTML元素，有人能解释一下吗?如果没有，这些插件是如何工作的?

8 个解决方案

#1

Some of the answers here are for infinite page. What Salman is asking is lazy loading of images.

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

Plugin

插件

Demo

演示

EDIT: How do these plugins work?

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

This is a simplified explanation:

这是一个简单的解释:

1. Find window size and find the position of all images and their sizes
2. 找到窗口大小，找到所有图像的位置和大小
3. If the image is not within the window size, replace it with a placeholder of same size
4. 如果图像不在窗口大小内，则使用相同大小的占位符替换它
5. When user scrolls down, and position of image < scroll + window height, the image is loaded
6. 当用户向下滚动时，图像的位置 <滚动+窗口高度，图像被加载< li>

#2

Dave Artz of AOL gave a great talk on optimization at jQuery Conference Boston last year. AOL uses a tool called Sonar for on-demand loading based on scroll position. Check the code for the particulars of how it compares scrollTop (and others) to the element offset to detect if part or all of the element is visible.

美国在线的Dave Artz去年在波士顿jQuery会议上做了一个关于优化的精彩演讲。AOL使用一种叫做Sonar的工具，根据滚动位置进行按需加载。检查代码，查看它如何将scrollTop(和其他)与元素偏移量进行比较，以检测部分或全部元素是否可见。

jQuery Sonar

jQuery声纳

Dave talks about Sonar in these slides. Sonar starts on slide 46, while the overall "load on demand" discussion starts on slide 33.

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

#3

There is a pretty nice infinite scroll plugin here

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

I've never programmed one myself, but I would imagine this is how it works.

我自己从来没有编程过，但我可以想象这就是它的工作原理。

1. An event is bound to the the window scrolling

   事件绑定到滚动窗口

   $(window).scroll(myInfinteScrollFunction);
   

2. The called function checks if scroll top is greater than the window size

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

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

3. An AJAX request is made, specifying which result # to start at, how many to grab, and any other parameters necessary for the data pull.

   将发出一个AJAX请求，指定从哪个result #开始，要获取多少，以及数据提取所需的任何其他参数。

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

4. The ajax returns some (most-likely JSON formatted) content, and passes them into the loadnig function.

   ajax返回一些(最有可能是JSON格式的)内容，并将它们传递到loadnig函数中。

Hope that makes sense.

希望是有意义的。

#4

I came up with my own basic method which seems to work fine (so far). There's probably a dozen things some of the popular scripts address that I haven't thought of.

我想出了我自己的基本方法，到目前为止似乎还不错。可能有很多我没有想到的流行脚本地址。

Note - This solution is fast and easy to implement but of course not great for performance. Definitely look into the new Intersection Observer as mentioned by Apoorv and explained by developers.google if performance is an issue.

注意——这个解决方案快速且易于实现，但对于性能当然不是很好。一定要查看Apoorv提到的新的交叉口观察者并由开发人员解释。如果性能是一个问题，谷歌。

The JQuery

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');
        }
    })
})

Sample html code

html代码示例

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

Explained

解释

When the page is scrolled each image on the page is checked..

当页面被滚动时，页面上的每个图像都会被选中。

$(this).attr('data-src') - if the image has the attribute data-src

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

and how far those images are from the bottom of the window..

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

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

(美元).offset()。<($(窗口).scrollTop()+(窗口)美元.height()+ 100)

adjust the + 100 to whatever you like (- 100 for example)

调整+ 100到你喜欢的值(例如- 100)

var source = $(this).data('src'); - gets the value of data-src= aka the image url

= $ var来源(这). data(“src”);-获取数据src=图像url的值

$(this).attr('src', source); - puts that value into the src=

(美元)。attr(“src”,来源);-将该值放入src=中

$(this).removeAttr('data-src'); - removes the data-src attribute (so your browser doesn't waste resources messing with the images that have already loaded)

(美元).removeAttr(“data-src”);-删除data-src属性(这样你的浏览器就不会浪费资源干扰已经加载的图像)

Adding To Existing Code

添加到现有的代码

To convert your html, in an editor just search and replace src=" with src="" data-src="

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

#5

Lazy loading images by attaching listener to scroll events or by making use of setInterval is highly non-performant as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.

由于每次调用getBoundingClientRect()都会迫使浏览器重新布局整个页面，并且会给您的网站带来相当大的性能，所以通过将监听器附加到滚动事件或使用setInterval来加载图像的延迟加载效率非常低。

Use Lozad.js (just 569 bytes with no dependencies), which uses IntersectionObserver to lazy load images performantly.

使用Lozad。js(只有569个字节，没有依赖关系)，它使用IntersectionObserver对延迟加载图像进行性能测试。

#6

The Swiss Army knife of image lazy loading is YUI's ImageLoader.

瑞士军刀的图像懒洋洋装载是YUI的图像承载量。

Because there is more to this problem than simply watching the scroll position.

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

#7

Im using jQuery Lazy. It took me about 10 minutes to test out and an hour or two to add to most of the image links on one of my websites (CampusCube). I have NO (none/zero) relationship of any kind to the dev, but it saved me a lot of time and basically helped improve our bounce rate for mobile users and I appreciate it.

我使用jQuery懒惰。我花了大约10分钟来测试，在我的一个网站(CampusCube)上添加了一两个小时的图像链接。我和开发人员没有任何关系，但它为我节省了很多时间，基本上提高了移动用户的弹跳率，我很感激。

#8

This Link work for me demo

这个链接可以用于我的演示

1.Load the jQuery loadScroll plugin after jQuery library, but before the closing body tag.

1。在jQuery库之后加载jQuery loadScroll插件，但在关闭body标签之前。

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

2.Add the images into your webpage using Html5 data-src attribute. You can also insert placeholders using the regular img's src attribute.

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.Call the plugin on the img tags and specify the duration of the fadeIn effect as your images are come into view

3所示。调用img标签上的插件，并在图像进入视图时指定fadeIn效果的持续时间。

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