脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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实现懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • uniapp基础知识点掌握以及面试题整理

    uniapp基础知识点掌握以及面试题整理

    uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于uniapp基础知识点掌握以及面试题整理的相关资料,需要的朋友可以参考下
    2023-02-02
  • JavaScript如何生成二维数组

    JavaScript如何生成二维数组

    这篇文章主要介绍了JavaScript如何生成二维数组问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • JavaScript流程控制语句实例详解

    JavaScript流程控制语句实例详解

    JavaScript中的流程控制语句是编写复杂逻辑和控制程序执行顺序的关键元素,这篇文章主要介绍了JavaScript流程控制语句的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-12-12
  • 浅谈javascript中的事件冒泡和事件捕获

    浅谈javascript中的事件冒泡和事件捕获

    本文主要介绍了javascript中的事件冒泡和事件捕获，具有一定的参考价值，下面跟着小编一起来看下吧
    2016-12-12
  • 一个支持ff的modaldialog的js代码

    一个支持ff的modaldialog的js代码

    一个支持ff的modaldialog的js代码...
    2007-03-03
  • Typescrip异步函数Promise使用方式

    Typescrip异步函数Promise使用方式

    这篇文章主要介绍了Typescrip异步函数Promise使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 概述如何实现一个简单的浏览器端js模块加载器

    概述如何实现一个简单的浏览器端js模块加载器

    本文主要对实现一个简单的js加载器的步骤进行介绍--主要可以分为解析路径、下载模块、解析模块依赖、解析模块四个步骤。需要的朋友来看下吧
    2016-12-12
  • Javascript 实现微信分享（QQ、朋友圈、分享给朋友）

    Javascript 实现微信分享（QQ、朋友圈、分享给朋友）

    这篇文章主要介绍了Javascript 实现微信分享（QQ、朋友圈、分享给朋友）的相关资料,需要的朋友可以参考下
    2016-10-10
  • javascript从作用域链谈闭包

    javascript从作用域链谈闭包

    这篇文章主要从作用域链谈闭包，闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现，本文针对闭包进行学习,需要的朋友可以参考下
    2015-12-12
  • 详解JS ES6编码规范

    详解JS ES6编码规范

    本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点，可以让我们写出更优美的、可读性更强的JavaScript ES6风格的代码。
    2021-05-05

最新评论