详解JavaScript的懒加载是如何实现的

 更新时间:2024年01月08日 08:39:59   作者:滚去睡觉  
懒加载(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实现懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • jsonp跨域请求实现示例

    jsonp跨域请求实现示例

    本文主要介绍了jsonp跨域请求实现示例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js实现图片漂浮效果的方法

    js实现图片漂浮效果的方法

    这篇文章主要介绍了js实现图片漂浮效果的方法,实例分析了javascript实现图片漂浮的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • javascript实现window.print()去除页眉页脚

    javascript实现window.print()去除页眉页脚

    这篇文章主要介绍了javascript实现window.print()去除页眉页脚的方法以及各参数的设置技巧,需要的朋友可以参考下
    2014-12-12
  • script不刷新页面的联动前后代码

    script不刷新页面的联动前后代码

    如何实现script不刷新页面的联动,在本文有个不错的示例或许对大家有所帮助
    2013-09-09
  • javascript生成不重复的随机数

    javascript生成不重复的随机数

    这篇文章主要介绍了javascript在指定范围内生成不重复的随机数的方法和相关实例,有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript类的继承全面示例讲解

    JavaScript类的继承全面示例讲解

    在 ES5 中,类的继承可以有多种方式,然而过多的选择有时反而会成为障碍,ES6 统了类继承的写法,避免开发者在不同写法的细节之中过多纠缠,但在介绍新方法之前,还是有必要先回顾下ES5中类的继承方式
    2022-08-08
  • 基于Phantomjs生成PDF的实现方法

    基于Phantomjs生成PDF的实现方法

    这篇文章主要介绍了基于Phantomjs生成PDF的实现方法,结合实例形式分析了Phantomjs结合nodejs生成pdf的操作步骤与相关技巧,需要的朋友可以参考下
    2016-11-11
  • js计算德州扑克牌面值的方法

    js计算德州扑克牌面值的方法

    这篇文章主要介绍了js计算德州扑克牌面值的方法,实例分析了javascript计算扑克面值的算法技巧,需要的朋友可以参考下
    2015-03-03
  • JavaScript仿百度图片浏览效果

    JavaScript仿百度图片浏览效果

    这篇文章主要为大家详细介绍了JavaScript仿百度图片浏览效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Boostrap入门准备之border box

    Boostrap入门准备之border box

    之前在学习Bootstrap的过程中,遇到各种奇葩的坑,如果在学习bootstrap之前,准备工作先做好,就可以或多或少的避开一些坑。下面小编开始给大家介绍border-box这个属性的知识。感兴趣的朋友一起学习吧
    2016-05-05

最新评论