脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript实现懒加载

详解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实现懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js使用Promise实现简单的Ajax缓存

    js使用Promise实现简单的Ajax缓存

    这篇文章主要介绍了js使用Promise实现简单的Ajax缓存，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • javascript 浏览器类型和版本号检测代码(兼容多浏览器)

    javascript 浏览器类型和版本号检测代码(兼容多浏览器)

    果对javascript了解不是特别深入的话,很容易就会写出不兼容的代码(就像我),这时候就得判断浏览器了。比如事件侦听、一些鼠标和键盘事件、Range等,一些都会不一样.下面列出几种常用的检测浏览器方法，以飨观众!
    2010-04-04
  • JavaScript使用sort函数实现汉字排序

    JavaScript使用sort函数实现汉字排序

    JavaScript中的sort函数是一个强大且多用途的工具,能够对数组的元素进行排序,而汉字按照拼音排序又是一个常见需求,下面我们就来看看如何使用JavaScript实现汉字排序吧
    2023-12-12
  • JavaScript中ES6字符串扩展方法

    JavaScript中ES6字符串扩展方法

    这篇文章主要介绍了JavaScript中ES6字符串扩展方法的相关资料,非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-08-08
  • JS动态添加的div点击跳转到另一页面实现代码

    JS动态添加的div点击跳转到另一页面实现代码

    这篇文章主要介绍了JS动态添加的div点击跳转到另一页面实现代码,需要的朋友可以参考下
    2017-09-09
  • js判断两个字符串是否相等的两种方法

    js判断两个字符串是否相等的两种方法

    昨天用Ajax作验证,在前台JS中判断返回的字符串的值与给定的值是否相等,索性给大家总结下,这篇文章主要给大家介绍了关于js判断两个字符串是否相等的两种方法,需要的朋友可以参考下
    2023-05-05
  • Bootstrap每天必学之面板

    Bootstrap每天必学之面板

    Bootstrap每天必学之面板，面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能，对面板感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 微信小程序实现跑马灯效果完整代码(附效果图)

    微信小程序实现跑马灯效果完整代码(附效果图)

    这篇文章主要介绍了微信小程序实现跑马灯效果完整代码(附效果图)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 小程序测试后台服务的方法(ngrok)

    小程序测试后台服务的方法(ngrok)

    这篇文章主要介绍了小程序测试后台服务的方法(ngrok)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • JS循环发送请求时控制请求并发数实例

    JS循环发送请求时控制请求并发数实例

    这篇文章主要介绍了JS循环发送请求时控制请求并发数实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12

最新评论