js图片延迟加载的三种实现

延迟加载也称为惰性加载，即长网页中图像的延迟加载。

在用户滚动到视口之外的图像之前，不会加载这些图像。

这与图像预加载相反。在长网页上使用延迟加载会使网页加载更快。

在某些情况下，它还可以帮助降低服务器负载。

延迟加载的优点：

提升用户体验。图片数量多的话，打开页面时要获取页面上的所有图片并加载，可能会造成卡顿，影响用户体验。因此，有选择地请求图片可以明显减轻服务器的压力和流量，减轻浏览器的负担。

方法一

将页面上所有图片的src属性设置为loading.gif，图片的真实路径在data-src属性中设置。

当页面滚动时，计算图片位置和滚动位置。当图片出现在浏览器视口中时，将图片的src属性设置为data-src的值。

img src=' http : loading . png ' data-src=' http : image . png ' img { display : block；边距-底部： 50px；}函数lazy load(){ var images=document . getelementsbytagname(' img ')；var n=0；//用于存储图片加载的位置，避免每次从第一张图片开始遍历return函数(){ var see height=document . document element . client height；var scroll top=document . document element . scroll top | | document . body . scroll top；for(var I=n；一.图像.长度；i ) { if (images[i]。offset top seeHeight scroll top){ if(images[I]。getAttribute(' src ')===' loading . png '){ images[I]。src=图像[i]。getAttribute(' data-src ')；} n=n ^ 1；} } } } lazy load()；//初始化页面图片窗口. addeventlistener ('scroll '，lazyload()，false)；方法2

虽然上面的方法没有错，但是它的性能很差，因为当页面滚动时，会高频触发滚动事件，对浏览器性能影响很大。因此，lazyload函数应该是节流和去抖。

功能节流和功能去抖。

这里html和css代码不变，throttle处理的js代码如下：

函数节流(fn，延迟，至少){ var timeout=null，startTime=new Date()；返回函数(){ var curTime=new Date()；clearTimeout(超时)；if (curTime - startTime=至少){ fn()；startTime=curTime} else { timeout=setTimeout (fn，delay)；} } }函数lazy load(){ var images=document . getelementsbytagname(' img ')，n=0；//存储图片加载的位置，避免每次从第一张图片开始遍历return function(){ var see height=document . document element . client height；var scroll top=document . document element . scroll top | | document . body . scroll top；for(var I=n；一.图像.长度；i ) { if(images[i]。offset top seeHeight scroll top){ if(images[I]。getAttribute(' src ')===' loading . png '){ images[I]。src=图像[i]。getAttribute(' data-src ')；} n=n ^ 1；} } } } lazy load()；//初始化第一页窗口的页面图片. addeventlistener ('scroll '，throttle (lazy load()，500，1000)，false)；方法3

目前有一个新的IntersectionObserver API，可以自动‘观察’元素是否可见。

用这种方式实现的代码非常简洁，但是很多浏览器不支持。

IntersectionObserver传入一个回调函数，当它观察元素集合的外观时将执行该函数。Io.observe是要观察的元素，可以逐个添加。Io管理一个阵列。当元素出现或消失时，数组添加或删除该元素并执行回调函数。函数查询(选择器){返回array . from(document . queryselectorall(选择器))；} var io=new IntersectionObserver(函数(项){ items.forEach(函数(项){ var target=item.targetif(target . GetAttribute(' src ')=' loading . png '){ target . src=target . GetAttribute(' data-src ')；} })});查询(' img ')。forEach(函数(项)){ io.observe(项)；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。