详解JavaScript的懒加载是如何实现的
作者：滚去睡觉
懒加载（Lazy Loading）是一种在软件开发中常用的优化技术,它主要用于延迟加载资源,直到真正需要使用的时候才进行加载,这样可以减少初始加载的时间和资源消耗,并提升用户体验,本文给大家详细介绍了JavaScript的懒加载是如何实现的,需要的朋友可以参考下
浅谈一下
懒加载（Lazy Loading）是一种在软件开发中常用的优化技术，它主要用于延迟加载资源，直到真正需要使用的时候才进行加载。这样可以减少初始加载的时间和资源消耗，并提升用户体验。
在前端开发中，懒加载通常用于图片、视频等资源的加载。当页面滚动到某个元素时，再去加载该元素所需的资源，而不是一次性加载所有内容。这样可以避免页面初始加载时的延迟和带宽消耗，提高页面加载速度。
那么我们如何实现一个懒加载？？
思考
要实现懒加载，我们该如何去做？
- 放上许多图片
放上许多图片模拟
- 获取屏幕大小和图片大小
要想实现图片暴露在屏幕上就开始加载，就得获取屏幕大小和图片大小
- 动态添加图片路径
要实现不暴露不加载，一暴露就加载，我们就得动态添加一个src路径，当暴露时，添加路径，就可以实现懒加载了
实现
- 放上图片
<img class='img-item' src="" data-original="https://media.indiedb.com/images/downloads/1/141/140388/logo_tup.jpg" alt=""> <img class='img-item' src="" data-original="https://ts1.cn.mm.bing.net/th/id/R-C.fe8303a785a33189e4e24ba530a70382?rik=dVxkKcgbWxyRLQ&riu=http%3a%2f%2fwww.laverocks.co.uk%2fgilslandmag%2fdesktops%2fxtup_800.jpg.pagespeed.ic.wb_S4EVXgU.jpg&ehk=4fkPQNq86UOkGhr71pywhwmmtLYHv6hcTrwLxq9%2fbBA%3d&risl=&pid=ImgRaw&r=0" alt=""> <img class='img-item' src="" data-original="https://ts1.cn.mm.bing.net/th/id/R-C.d4bfc069bb714818229338c5bd04b59e?rik=OutLpnfhKxV%2bKA&riu=http%3a%2f%2fwww.appzyw.net%2fupfiles%2fimage%2f202001%2f20200112113023601.jpg&ehk=0ot9LOln80CuJBFt66nhpE1JUD0dOt3hXb8dQJmY0Y4%3d&risl=&pid=ImgRaw&r=0" alt=""> <img class='img-item' src="" data-original="https://ts1.cn.mm.bing.net/th/id/R-C.7ecdb52cb56c0e121025e1b752296fb3?rik=tTsFgweG5QNWIQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f27%2f9727_7.jpg&ehk=fzaYq%2brx5WqWQ2zu7P3Mqgnmwiq4Nx%2fbDftpz3vaf7w%3d&risl=&pid=ImgRaw&r=0" alt=""> <img class='img-item' src="" data-original="https://pic4.zhimg.com/v2-497305b2ee426db31db4e5d2125fbb87_r.jpg" alt="">
在这里，我们并没有直接把文件路径丢给src，而是给了一个data-original，在后面，我们将动态让src=data-original
- 获取屏幕大小
let viewHeight = window.innerHeight
- 动态添加路径
function lazyLoad(){
let imgs = document.querySelectorAll('img')
Array.from(imgs).forEach(el=>{
let rect = el.getBoundingClientRect()
if(rect.top<viewHeight){
let image = new Image()
image.src = el.dataset.original
image.onload = function(){
el.src = image.src
}
el.removeAttribute('data-original')
}
})
}
- 使用 document.querySelectorAll() 方法获取页面中所有需要懒加载的图片元素，这里使用了选择器 img。
- 使用 Array.from() 方法将 NodeList 对象转换为数组。
- 遍历每个元素，获取其相对于视口的位置信息。
- 如果元素的顶部位置小于视口高度，则表示该元素已经进入了可视区域，需要进行懒加载。
- 创建一个新的 Image 对象，并将其 src 属性设置为对应元素的 data-original 属性值。
- 在图片加载完成后更新元素的 src 属性，并移除其 data-original 属性，避免重复加载。
细节
- 在页面首次打开的时候，我们就得调用一次lazyload()方法，如果不调用，就不会加载一开始暴露在屏幕上的图片
- 我们需要添加一个监听器，监听window，当发生滚动事件的时候调用lazyload()方法，判断是否有图片进入屏幕
lazyLoad()
window.addEventListener('scroll',lazyLoad)
结尾
本篇较为简单，但是懒加载是面试时经常会问的内容，合理运用懒加载，会给你的程序带来许多好处...
到此这篇关于详解JavaScript的懒加载是如何实现的的文章就介绍到这了,更多相关JavaScript实现懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！