JS实现非第一屏幕图片延迟加载的一个例子

目标

减少资源加载可以明显优化页面加载速度，因此可以减少页面加载时立即下载的图片数量，提高页面加载速度，需要时可以加载其他图片。

思路

要实现上述目标，有几个地方需要思考。

1.如何判断哪些图片需要立即加载，哪些可以稍后重新加载？

2.如何控制图片在指定时间加载？

对于第一个问题，打开页面时用户会看到的图片必须立即加载，其他可以推迟。也就是说，窗口中的图片需要立即加载。那么如何判断图片是否在窗口呢？GetBoundingClientRect返回元素的大小及其相对于视口的位置(详细描述)

您可以通过图片中顶部和右侧的值来判断图片是否在窗口中。

对于第二个问题，不是将src分配给img，而是将图片的链接地址存储在元素的data-src属性(用户自定义)中，需要加载时分配给src，然后下载图片。

实现

有了思路，我们才开始意识到。使用以下HTML进行测试

Div class='container' h1图片惰性加载/H1 pTestability短文，测试图片惰性加载/p pTestability短文，测试图片惰性加载/p pTestability短文，测试图片惰性加载/p pTestability短文，测试图片惰性加载/p pTestability短文，测试图片惰性加载/p p p可测性短文，测试图片惰性加载/p img src=' http : ' alt=' class=' lazy-img ' data-src=' http:3358c.hipotos.baidu.com/zhidao/pic/item/1f 178 a 82 b 9014 a 909461 e9 baa 177测试图片惰性加载/p p测试性短文，测试图片惰性加载/p p p测试性短文，测试图片惰性加载/p img src=' http : ' alt=' class=' lazy-img ' data-src=' http :3358 img 2 . niutuku.com/desk/1208/1718/ntk-1718-66531 . jpg '测试图片惰性加载/p测试性短文，测试图片惰性加载/p p p测试性短文测试图片偷懒加载/p img src=' http : ' alt=' class=' lazy-img ' data-src=' http :http://2t . 5068.com/uploads/allimg/151105/48-151105112944-51测试图片偷懒加载/p p测试性短文，测试图片偷懒加载/p p测试性短文，测试图片偷懒加载/p测试性短文，测试图片偷懒加载/p测试性短文测试图片惰性加载/p p测试性短文，测试图片惰性加载/p p测试性短文，测试图片惰性加载/p p测试性短文，测试图片惰性加载/p img src=' http : ' alt=' class=' lazy-img ' data-src=' http :3358 img 2 . niutuku.com/desk/1208/1721/ntk-1721-66572 . jpg '测试图片惰性加载/p测试性短文测试图片惰性加载/p p测试性论文，测试图片惰性加载/p p p测试性论文，测试图片惰性加载/p p p测试性论文。 按照前面的思路，有以下代码

//所有图片var imgs=document . queryselectorall('。lazy-img’)；//第一张图片加载lazyLoad(imgs) //其余图片加载-监控滚动事件窗口。addeventlistener ('scroll '，function(){//滚动事件触发过于频繁，所以添加throttle (lazyLoad (imgs)，200，500)})}下面是如何实现惰性加载的

函数lazyLoad(imgs，offset){ offset=offset | | 100；if(！imgs | | imgs . length 1){ console . log(' imgs为空')；返回；} [].slice.call(imgs)。forEach(function(element，Index){ //元素的DOM rect var rect=element . getboundingclientect()//出现在窗口if(rect . top=window . inner height offset rect . right 0){ element。setattribute ('src '，元素。getattribute(' data-src ')} } }通过window.innerHeight获取窗口的高度，当元素与窗口上边缘的距离偏移时加载图片；其中偏移是指定的偏移距离。

节流功能如下

函数throttle (fn，delay，至少){ let timer=null let start time=new Date()返回函数(){ let context=this let args=参数let curTime=new Date()(clear time out)(timer)if(curTime-start time=至少){ fn.apply(context，Args) //apply指定函数所指向的上下文(this)以及参数列表start time=curTime } else { timer=settimeout(function(){ fn }的效果。apply (context，args) starttime=curtime}，delay)}}

页面已加载，只加载了一张图片

向下滚动到指定位置，后续图片将依次加载

上面JS实现非首屏图片延迟加载的例子，就是边肖分享的全部内容。希望能给大家一个参考，支持我们。