<img>标记，但它们不会立即从服务器获取）。这种技术叫什么，它是如何工作的，在多少浏览器中起作用。是否有一个jQuery插件可以用最少的代码实现这种行为。
奖励：是否有人能解释一下HTML元素是否有“onScrolledIntoView”或类似事件。如果没有，这些插件是如何工作的？
我想出了自己的基本方法，目前看起来还不错。一些流行脚本可能解决了我没有考虑到的许多问题。
注意：这个解决方案快速且易于实现，但对于性能而言并不是最优的。如果性能是一个问题，一定要查看由Apoorv提到并由developers.google解释的新的Intersection Observer。
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=" 为 src="" data-src="
(编辑: 用存档副本替换了损坏的链接)
AOL的Dave Artz在去年的jQuery Conference Boston上做了一次优化方面的精彩演讲。AOL使用一种名为Sonar的工具，根据滚动位置进行按需加载。查看代码以了解它如何将scrollTop（和其他内容）与元素偏移量进行比较，以检测元素的某部分或全部是否可见。
Dave在这些幻灯片中谈到了Sonar。 Sonar从第46张幻灯片开始，而整个“按需加载”讨论则从第33张幻灯片开始。
这里有一个非常不错的无限滚动插件here
我自己从来没有编写过这样的插件，但我想它应该是这样工作的。
An event is bound to the the window scrolling
$(window).scroll(myInfinteScrollFunction);
The called function checks if scroll top is greater than the window size
function myInfiniteScrollFunction() {
if($(window).scrollTop() == $(window).height())
makeAjaxRequest();
}
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({
type: "POST",
url: "myAjaxFile.php",
data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
success: myInfiniteLoadFunction(msg)
});
The ajax returns some (most-likely JSON formatted) content, and passes them into the loadnig function.
loading="lazy"，以便将其加载推迟到用户滚动到该元素时再进行加载。<img src="http://placeimg.com/640/360/any" loading="lazy" />
如在MDN中所述：
Loading 属性 一个元素的 loading 属性（或一个img元素的loading属性）可用于指示浏览器推迟加载屏幕外的图像/iframe，直到用户滚动到它们附近。
对于图片，您可以在所有现代浏览器上使用该属性，但是对于iframes，目前仍处于试验阶段。
@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;
}<div class="scroll-down">
Let me take this space so that you can scroll down
</div>
<div class="image">
<img src="http://placeimg.com/640/360/any" loading="lazy" /> <!-- The only important part -->
</div>提示:
从演示中可以看出，它会创建布局移位，这会在滚动时导致糟糕的用户体验。因此，请尝试使用占位符。类似于这样的东西: NextJS 占位符
loading="lazy" 不会在滚动时加载。它会在开始时一次性加载所有内容。 - user1034912将监听器附加到滚动事件或利用 setInterval 来进行图片的懒加载是高度低效的，因为每次调用 getBoundingClientRect() 都会强制浏览器重新布局整个页面，并且会给您的网站带来相当大的卡顿。
使用 Lozad.js（仅569字节，无依赖项），它使用 IntersectionObserver 来实现高效的图片懒加载。
这个链接对我有效 演示
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 标签上调用插件，并指定淡入效果的持续时间，使您的图像逐渐显示出来
$('img').loadScroll(500); // in ms
我正在使用jQuery Lazy。测试花了我大约10分钟的时间，然后又花了一两个小时将其添加到我网站上的大多数图像链接（CollegeCarePackages.com）。我与开发者没有任何关系（零），但它为移动用户改善了我们的跳出率，节省了我很多时间，我非常感激。