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

JavaScript实现图片懒加载的两种方式

 更新时间：2024年04月19日 08:24:21   作者：挖稀泥的工人  
现在的科技发达,图片的资源占比越来越大,对图片在页面的优化已经成为前端开发必备的技术之一,难的图片懒加载方法咱们看着头大,简单,易懂的才适合我们程序员,所以本文给大家介绍了JavaScript实现图片懒加载的两种方式,需要的朋友可以参考下

引言

现在的科技发达，图片的资源占比越来越大，对图片在页面的优化已经成为前端开发必备的技术之一，难的图片懒加载方法咱们看着头大，简单，易懂的才适合我们程序员。

很好，开始第一步将图片的标签放好，设定一个data-origin标签在img当中，这样使用data-的命名方式是为了与HTML5的自定义数据属性约定保持一致。

简单的方式

思路就是

  • 先获取到可视区域，我们使用clientHeight，它可以获取到html元素的客户端高度。
  • 获取到带有data-origin标签的全部img属性
  • 获取每张图片相对视窗口的高度，使用getBoundingClientRect，其中包含各种元素相对于视口的信息和元素本身的信息。
  • 一旦图片相对于视窗顶部的距离小于可视区域高度，那就将data-origin标签的url赋给src，最后清除data-origin标签。
<style>
        img{
            height: 300px;
            width: 300px;
            margin-bottom: 50px;
            display: block;
        }
    </style>
</head>
<body>
    <img src="" data-origin="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt="">
    <img src="" data-origin="https://img1.baidu.com/it/u=435134468,1942448903&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889" alt="">
    <img src="" data-origin="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800">
    <img src="" data-origin="https://img2.baidu.com/it/u=855369075,175194576&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
    <img src="" data-origin="https://img2.baidu.com/it/u=2004708195,3393283717&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
    <img src="" data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt="">
    <img src="" data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt="">
    <img src="" data-origin="https://img0.baidu.com/it/u=2788901948,3907873318&fm=253&fmt=auto?w=500&h=281" alt="">
    <img src="" data-origin="https://img2.baidu.com/it/u=811993169,635123395&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
    <img src="" data-origin="https://img0.baidu.com/it/u=924031950,2251460669&fm=253&fmt=auto&app=138&f=JPEG?w=1105&h=500" alt="">

<script>
    //获取可视区域的高度    offsetHeight包含外部高度（边框）
    const viewHeight = document.documentElement.clientHeight  //window.innerHeight
    // console.log(viewHeight);
    function lazyLoad(){
        const imgs = document.querySelectorAll('img[data-origin]') //属性选择
        console.log(imgs);
        imgs.forEach(item =>{
            let res = item.getBoundingClientRect()
            // console.log(res);
            if(res.top < viewHeight){
                item.src = item.dataset.origin
                item.removeAttribute('data-origin')
            }
        })

        // 获取可视区域的高度
    // const viewHeight = document.documentElement.clientHeight
    // const io = new IntersectionObserver(
    //   (entries) => {
    //     entries.forEach(entry => {
    //       if (entry.isIntersecting) {
    //         entry.target.src = entry.target.dataset.original || ''
    //         entry.target.removeAttribute('data-original')
    //         io.unobserve(entry.target)
    //       }
    //     })
    //   },
    //   {
    //     threshold: 0
    //   }
    // )
    // const imgs = document.querySelectorAll('img[data-original]')
    // imgs.forEach(item => {
    //   io.observe(item)
    // })



    }

    document.addEventListener('scroll',lazyLoad)

    lazyLoad()

</script>

</body>

第二个方法

第二个方法就相对更复杂一些，通过判断某个元素和父元素交叉比例来判断是否需要懒加载。是异步监听的。当交叉比例达到某个值就会触发回调函数。我们这里使用的是IntersectionObserver方法，用一个外部box包裹所有图片，让图片超出box就滚动。看了上面的方法，这个方法也就明白在干什么了。

    #box{
      width: 100vw;
      height: 100vh;
      overflow: scroll;
    }
    img{
      height: 300px;
      margin-bottom: 50px;
      display: block;
    }


    const viewHeight = document.documentElement.clientHeight
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
        //判断是否进入可视区
          if (entry.isIntersecting) {
            entry.target.src = entry.target.dataset.original || ''
            //移除标签
            entry.target.removeAttribute('data-original')
            io.unobserve(entry.target)
          }
        })
      },
      {
      取值范围从0~1，表示交叉比例
        threshold: 0
      }
    )
    
    //监听每一张图片
    const imgs = document.querySelectorAll('img[data-original]')
    imgs.forEach(item => {
      io.observe(item)
    })

到此这篇关于JavaScript实现图片懒加载的两种方式的文章就介绍到这了,更多相关JavaScript图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript编码小技巧分享

    JavaScript编码小技巧分享

    这篇文章适合任何一位基于JavaScript开发的开发者。我写这篇文章主要涉及JavaScript中一些简写的代码，帮助大家更好理解一些JavaScript的基础。希望这些代码能从不同的角度帮助你更好的理解JavaScript。
    2020-09-09
  • javascript实现时间格式输出FormatDate函数

    javascript实现时间格式输出FormatDate函数

    这篇文章主要介绍了javascript实现时间格式输出FormatDate函数,可实现fmt标签一样对日期时间型内容格式输入的功能,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • 小程序中canvas的drawImage方法参数使用详解

    小程序中canvas的drawImage方法参数使用详解

    这篇文章主要介绍了小程序中canvas的drawImage方法参数使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • JavaScript参数个数可变的函数举例说明

    JavaScript参数个数可变的函数举例说明

    JavaScript允许一个函数传递个数可变的参数，因为有arguments这个内置对象，它一个函数传递的所有参数的数组
    2014-10-10
  • location对象的属性和方法应用(解析URL)

    location对象的属性和方法应用(解析URL)

    本文将与大家分享下location对象使用属性和方法来解析URL的实例，感兴趣的朋友可以参考下，希望对你有所帮助
    2013-04-04
  • 微信小程序 调用微信授权窗口相关问题解决

    微信小程序 调用微信授权窗口相关问题解决

    这篇文章主要介绍了微信小程序 调用微信授权窗口相关问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 微信小程序的开发范式BeautyWe.js入门详解

    微信小程序的开发范式BeautyWe.js入门详解

    这篇文章主要介绍了微信小程序的开发范式BeautyWe.js详解，它是一套专注于微信小程序的企业级开发范式，它的愿景是：让企业级的微信小程序项目中的代码，更加简单、漂亮,需要的朋友可以参考下
    2019-07-07
  • 解析Javascript单例模式概念与实例

    解析Javascript单例模式概念与实例

    本文将介绍Javascript模式中较为常见和实用的模式——单例模式，主要分为概念和实例部分。在介绍实例的同时也会对代码中额外的知识点进行讲解。需要的朋友可以看下
    2016-12-12
  • javascript自动给文本url地址增加链接的方法分享

    javascript自动给文本url地址增加链接的方法分享

    这篇文章主要介绍了javascript自动给文本url地址增加链接的方法，有需要的朋友可以参考一下
    2014-01-01
  • 微信小程序自定义底部导航栏组件

    微信小程序自定义底部导航栏组件

    这篇文章主要为大家详细介绍了微信小程序自定义底部导航栏组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论