js图片懒加载（滚动到可视区域显示）

作者: 小棋子js | 来源:发表于2019-12-17 10:29 被阅读0次

js图片懒加载（滚动到可视区域显示）
项目优化
网页中有大量图片加载很慢，如何优化？
懒加载和预加载
首屏加载速度优化——图片懒加载
图片懒加载优化页面性能
Vue自定义指令实现图片懒加载
js实现图片懒加载
图片懒加载
图片懒加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container{
                width:400px;
            }
            img{
                width:400px; 
                height:600px;//不能加100%；加指定高度才可以
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/qrcodes/17913331/QQ%E5%9B%BE%E7%89%8720190517105124.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/320/h/320" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
            <img src="ing.gif" data-src="https://upload.jianshu.io/users/upload_avatars/17913331/962b25d6-e6c8-403f-afca-c1feeeb66c8b?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" class="lazy">
        </div>
        <script>
        class LazyLoad{
            constructor(className){
                this.imgList = [...document.querySelectorAll(className)];
                this.judge();
                this.bindEvent();
            }
            // 防抖函数
            debounce(fn,delay){
                let timer = null;
                return function(){
                    if(timer){
                        clearTimeout(timer);
                    }
                    timer = setTimeout(fn,delay);
                }
            }
            // 监听滚动条
            bindEvent(){
                window.addEventListener('scroll',this.debounce(()=>{
                    this.imgList.length && this.judge();                  
                },200))
            }
            // 判断是否在可视范围
            judge(){
                let imgs = this.imgList;
                for(let i = 0;i < imgs.length;i++){
                  if(imgs[i].getBoundingClientRect().top <= window.innerHeight){
                        this.load(imgs[i],i);
                    }
                }
            }
            // 将loading图替换为真实地址，加载图片
            load(el,index){
                let src = el.getAttribute('data-src');
                el.src = src;
                //this.imgList.splice(index,1);
            }
        }
        const lazy = new LazyLoad('.lazy')
        </script>
    </body>
</html>