图片的懒加载

最新推荐文章于 2024-01-11 14:36:27 发布

H_c_l

最新推荐文章于 2024-01-11 14:36:27 发布

阅读量140

点赞数

分类专栏： js 文章标签：图片懒加载

本文链接：https://blog.csdn.net/H_c_l/article/details/90233153

版权

js 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

图片懒加载

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

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>
    <!-- <script src="../script/lazy.image.min.js"></script>
    <script>
        LazyImage.init();
    </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)