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

EN

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

Plugin

Demo

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

这是一个简单的解释：

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

我想出了我自己的基本方法，它似乎工作得很好(到目前为止)。在一些流行的脚本中，可能有十几件事是我没有想到的。

Note -此解决方案快速且易于实现，但对性能当然不是很好。如果性能有问题，一定要看看Apoorv提到并由developers.google解释的新Intersection Observer。

The 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=的值，也就是图像url

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

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

向现有代码添加

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

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

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

1. 将事件绑定到窗口滚动

调用函数的$(window).scroll(myInfinteScrollFunction);

• The检查滚动顶部是否大于窗口大小

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

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

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

• ajax返回一些(很可能是JSON格式的)内容，并将它们传递给loadnig函数。

希望这是有意义的。