我在很多“现代”网站（例如脸书和谷歌图片搜索）中都注意到了这一点，只有当用户向下滚动页面足以将它们带入可见视口区域时，才会加载折叠下方的图像（在查看源上，页面显示X个<img>标签，但它们不会立即从服务器中取出）。这种技术叫做什么，它是如何工作的以及它有多少浏览器可以工作。是否有一个jQuery插件可以用最少的编码实现这种行为。
额外奖励：有人可以解释是否存在“onScrolledIntoView”或HTML元素的类似事件。如果没有，这些插件如何工作？
AOL的Dave Artz去年在jQuery Conference Boston举行了一场关于优化的精彩演讲。 AOL使用一种名为Sonar的工具，根据滚动位置进行按需加载。检查代码，了解它如何将scrollTop（和其他）与元素偏移进行比较，以检测元素的部分或全部是否可见。
戴夫在these slides谈论声纳。声纳从幻灯片46开始，而整体“按需加载”讨论在幻灯片33上开始。
有一个非常漂亮的无限滚动插件here
我自己从未编程过，但我想这就是它的工作原理。
$(window).scroll(myInfinteScrollFunction);
function myInfiniteScrollFunction() {
if($(window).scrollTop() == $(window).height())
makeAjaxRequest();
}
$.ajax({
type: "POST",
url: "myAjaxFile.php",
data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
success: myInfiniteLoadFunction(msg)
});
希望有道理。
我提出了自己的基本方法，似乎工作得很好（到目前为止）。一些流行的脚本可能会解决我可能没有想到的十几件事。
注意 - 此解决方案快速且易于实施，但当然对性能不是很好。绝对看看Intersection Observer提到的新的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="
通过将侦听器附加到滚动事件或通过使用setInterval来延迟加载图像是非常不具有性能的，因为每次调用getBoundingClientRect（）都会强制浏览器在整个页面中使用re-layout并且会为您的网站引入相当大的jank。
使用Lozad.js（只有569字节没有依赖关系），它使用IntersectionObserver来延迟加载图像。
图像延迟加载的瑞士军刀是YUI的ImageLoader。
因为这个问题不仅仅是观看滚动位置。
这个链接为我工作demo
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
我正在使用jQuery Lazy。我花了大约10分钟测试一两个小时来添加到我的一个网站（CollegeCarePackages.com）上的大多数图像链接。我对开发者没有任何（无/零）关系，但它为我节省了很多时间，基本上有助于提高移动用户的跳出率，我很感激。