UMD格式的懒加载（lazyload）

最新推荐文章于 2024-08-08 00:53:28 发布

qq_42958985

最新推荐文章于 2024-08-08 00:53:28 发布

阅读量603

点赞数

分类专栏： js 文章标签： js lazyload 懒加载 javascript UMD格式

本文链接：https://blog.csdn.net/qq_42958985/article/details/81634640

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

页面的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 100%;
            height: 900px;
        }
    </style>
</head>
<body>
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p1.jpg">
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p2.jpg">
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p3.jpg">
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p4.jpg">
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p5.jpg">
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p6.jpg">
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p7.jpg">
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p8.jpg">
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p9.jpg">
    <img class="soluxLazy" src="https://pic.solux.cn/PC/img-preloading.gif" data-src="https://pic.solux.cn/PC/2017_products/towel/p10.jpg">
<script type="text/javascript" src="soluxLazy.js"></script>
</body>
</html>

soluxLazy.js代码

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD (Register as an anonymous module)
        define([], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS
        module.exports = factory();
    } else {
        // Browser globals
        factory();
    }
}(function () {

    var img = document.querySelectorAll('.soluxLazy');
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < img.length; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop + 100) {
                if (img[i].getAttribute("src") === "https://pic.solux.cn/PC/img-preloading.gif") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }

    // 节流函数
    function throttle(func, wait, options){
        var timeout, context, args, result;
        var previous = 0;
        if (!options) options = {};

        var later = function() {
            previous = options.leading === false ? 0 : Date.now();
            timeout = null;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        };

        var throttled = function() {
            var now = Date.now();
            if (!previous && options.leading === false) previous = now;
            var remaining = wait - (now - previous);
            context = this;
            args = arguments;
            if (remaining <= 0 || remaining > wait) {
                if (timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }
                previous = now;
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            } else if (!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }
            return result;
        };

        throttled.cancel = function() {
            clearTimeout(timeout);
            previous = 0;
            timeout = context = args = null;
        };

        return throttled;
    };

    if(img.length){
        lazyload();
        window.addEventListener('scroll',throttle(lazyload,200),false);
    }

}));