下面我就为大家分享一篇用js实现非首屏图片延迟加载的示例，具有很好的参考价值，希望对大家有所帮助。
目标
减少资源加载可以明显的优化页面加载的速度，所以可以减少页面载入时立即下载的图片的数量，以提高页面加载速度，其他的图片在需要的时候再进行加载。
思路
想要实现以上的目标，有几个地方需要思考。
1、如何判断哪些图片需要立即加载，哪些可以晚些再加载？
2、如何控制图片在指定的时候加载？
对于第一个问题，页面打开就会被用户看到的图片肯定需要立即加载，其他的可以延后。即在视窗中的图片需要立即加载。那么如何判断图片是否在视窗内呢？getBoundingClientRect可以返回元素的大小及其相对于视口的位置（详细说明）
可以通过图中top和right的值判断图片是否在视窗中。
对于第二个问题，先不给img指定src，而是将图片链接地址存放再元素的src属性（自定义）中，需要加载的时候再赋值给src，才会开始下载图片。
实现
思路有了，我们开始实现。用以下HTML进行测试
<p class="container">
<h1>图片懒加载</h1>
<p>测试性配文，测试图片懒加载</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2046" title="免费语音克隆"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680030960517.png" alt="免费语音克隆" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2046" title="免费语音克隆">免费语音克隆</a>
<p>这是一个提供免费语音克隆服务的平台，用户只需上传或录制一段 5 秒以上的清晰语音样本，平台即可生成与用户声音高度一致的 AI 语音克隆。</p>
</div>
<a href="/ai/2046" title="免费语音克隆" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
@@##@@
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
@@##@@
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
@@##@@
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
@@##@@
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
@@##@@
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
<p>测试性配文，测试图片懒加载</p>
</p>html中链接都来自百度图片，可在network中观察是否加载，这里忽略样式。按照之前的思路，有以下代码
//所有的图片
var imgs = document.querySelectorAll('.lazy-img');
//首屏图片加载
lazyLoad(imgs)
//剩余图片加载---监听滚动事件
window.addEventListener('scroll',function(){
//滚动事件触发太频繁了，所以加上节流
throttle(lazyLoad(imgs),200,500)
})
}下面就是如何实现lazyLoad
function lazyLoad(imgs,offset){
offset = offset || 100;
if (!imgs || imgs.length < 1) {
console.log('imgs为空');
return ;
}
[].slice.call(imgs).forEach(function(element,index){
//元素的DomRect
var rect = element.getBoundingClientRect()
//出现在视窗中
if (rect.top <= window.innerHeight + offset && rect.right > 0) {
element.setAttribute('src',element.getAttribute('src'))
}
})
}通过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)
}
}
}效果
页面载入完成，只加载了一张图片
向下滚动到指定位置，才会依次加载后续图片
以上这篇JS实现非首屏图片延迟加载的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
