图片懒加载

最新推荐文章于 2024-05-22 13:52:22 发布

chy_888

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量104

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_52311133/article/details/128514474

版权

前言

图片懒加载是一种常用的前端性能优化手段，用于图片量大的小程序以及网站，只加载浏览器可视区域内的图片，当用户触发滚动的瞬间再去请求图片资源。

实现方式

img标签有自定义属性data-src
首屏展示可视区的src替换为data-src
当页面滚动时图片的src替换为data-src

<style>
img{
width:100%;
height:300px;
}
</style>
<body>
<img class='pic' src="" alt="" data-src="../images/1.jpeg" />
    <img class='pic' src="" alt="" data-src="../images/2.png" />
    <img class='pic' src="" alt="" data-src="../images/3.gif" />
    <img class='pic' src="" alt="" data-src="../images/4.png" />
    <img class='pic' src="" alt="" data-src="../images/5.png" />
    <img class='pic' src="" alt="" data-src="../images/6.png" />
    <img class='pic' src="" alt="" data-src="../images/7.png" />
    <img class='pic' src="" alt="" data-src="../images/8.jpg" />
    <img class='pic' src="" alt="" data-src="../images/9.jpg" />
    <img class='pic' src="" alt="" data-src="../images/10.jpg" />

<script>
   // 获取所有的图片
   const imgs = document.querySelectorAll('.pic') 
    // 获取可视区高度
   let viewHeight = window.innerHeight
   const lazy = lazyLoad()
   function lazyLoad() {
        let count = 0
        return ()=>{
          for(let i=0;i<imgs.length;i++){
            let distance = viewHeight-imgs[i].getBoundingClientRect().top
            if(distance>=0){
              imgs[i].src = imgs[i].getAttribute('data-src')
              count+=1
            }
          }
        }
         }
    // 以防抖的思路优化节流
    // 节流函数：在一定时间内，触发多次事件，只认第一次触发的到了事件执行结束事件
    // 防抖函数：在一定时间内，触发多次事件，只认最后一次触发并且重置时间
    function throttle(fn,time){
        let oldTime = 0
        let timer = null
        return ()=>{
            let nowTime = new Date()
            if(nowTime-oldTime<time){
                if(timer){
                    clearInterval(timer)
                }
                timer = setTimeout(()=>{
                    oldTime = nowTime
                    fn()
                },time)
            }else{
                fn()
                oldTime = nowTime
            }
        }
    }
    window.addEventListener('scroll', throttle(load,1000),false) 
</script>
</body>