非首屏图片延时加载

素颜马尾好姑娘i 2023-06-11 03:20 126阅读 0赞

## 目标 ##

减少资源加载可以明显的优化页面加载的速度，所以可以减少页面载入时立即下载的图片的数量，以提高页面加载速度，其他的图片在需要的时候再进行加载。

## 思路 ##

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

1、如何判断哪些图片需要立即加载，哪些可以晚些再加载？

2、如何控制图片在指定的时候加载？

对于第一个问题，页面打开就会被用户看到的图片肯定需要立即加载，其他的可以延后。即在视窗中的图片需要立即加载。那么如何判断图片是否在视窗内呢？getBoundingClientRect可以返回元素的大小及其相对于视口的位置（[详细说明][Link 1]）

![1072774-20180105165318487-1683237597.png][]

可以通过图中top和right的值判断图片是否在视窗中。

对于第二个问题，先不给img指定src，而是将图片链接地址存放再元素的data-src属性（自定义）中，需要加载的时候再赋值给src，才会开始下载图片。

## 实现 ##

思路有了，我们开始实现。用以下HTML进行测试

![ContractedBlock.gif][]HTML ![ExpandedBlockStart.gif][]

<div class="container">
 <h1>图片懒加载</h1>
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 <img src="" alt="" class="lazy-img" data-src="http://c.hiphotos.baidu.com/zhidao/pic/item/1f178a82b9014a909461e9baa1773912b31bee5e.jpg">
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 <img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/1208/1718/ntk-1718-66531.jpg">
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 <img src="" alt="" class="lazy-img" data-src="http://2t.5068.com/uploads/allimg/151105/48-151105112944-51.jpg">
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 <img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/anime/4654/4654-4708.jpg">
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 <img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/1208/1721/ntk-1721-66572.jpg">
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 测试性配文，测试图片懒加载
 
 </div>

html中链接都来自百度图片，可在network中观察是否加载，这里忽略样式。按照之前的思路，有以下代码

//所有的图片
          var imgs = document.querySelectorAll('.lazy-img'); //首屏图片加载
     lazyLoad(imgs) //剩余图片加载---监听滚动事件
          window.addEventListener('scroll',function(){ //滚动事件触发太频繁了，所以加上节流
            throttle(lazyLoad(imgs),200,500) }) }

下面就是如何实现lazyLoad

通过window.innerHeight获取到视窗的高度，当元素距离视窗上边沿为offset时，加载图片；其中offset为指定的偏移距离。

节流函数如下

function throttle (fn, delay, atleast) { let timer = null let startTime = new Date() return function () { let context = this let args = arguments let curTime = new Date() clearTimeout(timer) if (curTime - startTime >= atleast) { fn.apply(context, args) // apply 指定函数指向的 上下文(this) 和 参数列表
              startTime = curTime } else { timer = setTimeout(function () { fn.apply(context, args) startTime = curTime }, delay) } } }

## 效果 ##

页面载入完成，只加载了一张图片

![1072774-20180105170919424-1045661909.png][]

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

![1072774-20180105171037424-287051180.png][]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
[1072774-20180105165318487-1683237597.png]: /images/20230531/50a278461d4c41bfaa874c983ae173de.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20230531/619196a79eb8412cbeb9ebcc05ac4d8b.png
[1072774-20180105170919424-1045661909.png]: /images/20230531/ea88b5314fe74885a475dc342c8aed01.png
[1072774-20180105171037424-287051180.png]: /images/20230531/4b4df6cbc0b54619b31173183e6337c3.png