图片的懒加载

Love The Way You Lie 2022-01-31 01:53 326阅读 0赞

## 图片懒加载 ##

### 网页上图片点到哪里图片就加载到哪里，不用一次性加载完成 ###

#### html主要页面 ####

直接引入js文件，src改成data-src就可以直接进行图片的懒加载

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>首页</title>
    
    
        <style> html, body { margin: 0px; padding: 0px; } ul { margin: 0px; padding: 0px; } li { list-style: none; font-size: 0; } li img { min-height: 200px; //给个最小高度，防止图片多次加载 height: 100%; width: 100%; } </style>
    
    </head>
    
    <body>
        <ul>
            <li><img data-src="../home_page/01.jpg" /></li>
            <li><img data-src="../home_page/02.jpg" /></li>
            <li><img data-src="../home_page/03.jpg" /></li>
            <li><img data-src="../home_page/04.jpg" /></li>
            <li><img data-src="../home_page/05.jpg" /></li>
            <li><img data-src="../home_page/06.jpg" /></li>
            <li><img data-src="../home_page/07.jpg" /></li>
    
        </ul>
        <script src="../script/lazy-load.js"></script>
        
    </body>
    
    </html>

#### js引入代码 ####

// 图片懒加载
    
    var LazyLoad = /** @class */ (function () { 
        function LazyLoad(options) { 
            this.scrollListenerFn = this.scrollListenerFn.bind(this);
            this.resizeListenerFn = this.resizeListenerFn.bind(this);
        }
        LazyLoad.prototype.init = function (params) { 
            this.initParams(params);
            if (!this.lazyImages) { 
                return;
            }
            this.throttleTimer = null;
            this.defaultImg && this.addDefaultImg();
            this.resizeListenerFn();
            this.bindEvent();
        };
        // 初始化外部参数
        LazyLoad.prototype.initParams = function (params) { 
            var elements = params.elements;
            if (!elements.length) { 
                return;
            }
            var imgs = Array.prototype.slice.call(elements, 0);
            var reg = /(^|\s)lazy-bg(\s|$)/;
            // let reg = new RegExp('(^|\\s)' + 'lazy-bg' + '(\\s|$)')lazy-load
            imgs.forEach(function (img) { 
                if (reg.test(img.className)) { 
                    img.isBg = true;
                }
            });
            // 再次调用init时，无需进行部分参数初始化
            if (this.lazyImages) { 
                this.lazyImages.length !== 0 && this.removeEvent();
                this.lazyImages = this.lazyImages.concat(imgs);
                return;
            }
            // 需要懒加载的图片
            this.lazyImages = imgs;
            // 加载时显示的默认图
            this.defaultImg = params.defaultImg;
            // 视口提前距离
            this.distance = params.distance || 0;
            // 存储真实地址的标签
            this.tag = params.tag || 'data-src';
            // 节流间隔
            this.throttle = params.throttle || 200;
        };
        LazyLoad.prototype.bindEvent = function () { 
            document.addEventListener('scroll', this.scrollListenerFn);
            window.addEventListener('resize', this.resizeListenerFn);
            window.addEventListener('orientationchange', this.resizeListenerFn);
        };
        LazyLoad.prototype.removeEvent = function () { 
            document.removeEventListener('scroll', this.scrollListenerFn);
            window.removeEventListener('resize', this.resizeListenerFn);
            window.removeEventListener('orientationchange', this.removeEventListener);
        };
        LazyLoad.prototype.getWH = function () { 
            this.W = document.documentElement.clientWidth || window.innerWidth;
            this.H = document.documentElement.clientHeight || window.innerHeight;
        };
        LazyLoad.prototype.scrollListenerFn = function () { 
            var _this = this;
            if (this.throttleTimer) { 
                return;
            }
            this.throttleTimer = setTimeout(function () { 
                _this.throttleTimer = null;
                _this.lazyLoad();
            }, this.throttle);
        };
        //需要获取宽高
        LazyLoad.prototype.resizeListenerFn = function () { 
            var _this = this;
            if (this.throttleTimer) { 
                return;
            }
            this.throttleTimer = setTimeout(function () { 
                _this.throttleTimer = null;
                _this.getWH();
                _this.lazyLoad();
            }, this.throttle);
        };
        LazyLoad.prototype.isInView = function (image) { 
            var top = image.getBoundingClientRect().top;
            var left = image.getBoundingClientRect().left;
            var right = image.getBoundingClientRect().right;
            var bottom = image.getBoundingClientRect().bottom;
            // console.log(left <= this.W + this.distance && right >= 0 - this.distance);
            if (getComputedStyle(image).display !== 'none') { 
                if (top <= this.H + this.distance &&
                    bottom >= 0 - this.distance) { 
                    return true;
                } else { 
                    return false;
                }
            } else { 
                return false;
            }
        };
        LazyLoad.prototype.lazyLoad = function () { 
            var _this = this;
            this.lazyImages.forEach(function (image) { 
                if (_this.isInView(image)) { 
                    _this.loader(image);
                }
            });
        };
        LazyLoad.prototype.loader = function (image) { 
            var img = new Image();
            var imgUrl = image.getAttribute(this.tag);
            var self = this;
            img.onload = function (e) { 
                self.succ(image, imgUrl);
            };
            img.src = imgUrl;
        };
        LazyLoad.prototype.addDefaultImg = function () { 
            var _this = this;
            this.lazyImages.forEach(function (image) { 
                image.isBg ?
                    (image.style.backgroundImage = "url('" + _this.defaultImg + "')") :
                    image.setAttribute('src', _this.defaultImg);
            });
        };
        LazyLoad.prototype.succ = function (image, imgUrl) { 
            image.isBg ?
                (image.style.backgroundImage = "url('" + imgUrl + "')") :
                (image.src = imgUrl);
            this.lazyImages = this.lazyImages.filter(function (img) { 
                return img !== image;
            });
            if (this.lazyImages.length === 0) { 
                this.removeEvent();
            }
        };
        LazyLoad.prototype.fail = function () { };
        LazyLoad.prototype._hasClass = function (el, className) { 
            var reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
            return reg.test(el.className);
        };
        return LazyLoad;
    }());
    
    let lazy = new LazyLoad();
    lazy.init({ elements: document.getElementsByTagName('img')})
    // setTimeout(function () { 
    // lazy.init({ 
    // elements: document.getElementsByTagName('img')
    // });
    // }, 500)