UMD格式的懒加载（lazyload）

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量556 收藏
点赞数
分类专栏： js 文章标签： js lazyload 懒加载 javascript UMD格式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42958985/article/details/81634640
版权

页面的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);
    }

}));
qq_42958985
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
懒加载lazyload
05-25
优化网站加载速度，使用lazyload.js，有完整的demo,有jquery.lazyload.js和jquery-1.11.0.min.js
importcjsamdumd:基于promise动态异步加载“ commonjs”和“ umd”和“ amd”，“ cmd”和“ ES”，“ json”模块6合一，实现commonjs，amd，umd，cmd模块全部初始化加载了，包装cjs和amd和umd模块为异步加载promise方法，可以在commonjs模块中使用顶级等待，使用获取方法来获取指定的模块包源代码，可以将模块放入模块仓库中，并解决了包之间的依赖关系，如果依赖包本身的require函数需要，则在模块仓库中约会需要的模块包的定义了模块包的
03-22
importcjsamdumd 浏览器运行时异步模块加载器 动态异步加载“ CommonJS ”和“ umd”和“ amd”，“ cmd”和“ ES”和'json'模块6合一 非常简洁小巧的工具，基于Promise 基于fetch ，加载的模块如果不同域，则必须支持跨域请求，因为要使用模块的源代码来生成包装函数 使用http响应headers中的content-type属性来判断是json还是JavaScript模块 headers中的content-type属性必须为application/JavaScript application/json 实现CommonJS ， amd,umd,cmd模块全部初始化加载了 支持模块中的top-level-await cjs，amd，umd，cmd模块完全的异步加载 模块禁止循环依赖，否则会出现调用栈堆积 模块初始化加载初始化开启了过期，10秒钟，
Vue3组件库打包指南，一次生成esm、esm-bundle、commonjs、umd四种格式
sinat_33488770的博客
10-08 2806
上一篇里提到了启动服务前会先进行一下组件库的打包，运行的命令为： 显然是提供的一个命令：处理函数为，接下来我们详细看一下这个函数都做了什么。 首先设置了一下当前的环境变量，然后清空相关的输出目录。 接下来依次打包了四种类型的产物，方法都是同一个，这个方法后面会详细分析。以组件为例看一下未打包前的组件结构：一个典型组件的构成主要是四个文件：样式部分使用的是语言，样式比较少的话会直接内联写到单文件的块中，否则会单独创建一个样式文件，比如图中的，每个组件除了引入自己本身的样式外，还会引入一些基本样式、其他组件的样
amd、umd、cmd、commonjs
weixin_44283589的博客
08-04 400
异步加载模块，适用于浏览器环境中需要动态加载模块的情况。使用 define 函数定义模块使用 require 函数异步加载依赖模块。支持在浏览器和Node.js环境中使用的通用模块定义格式可以通过全局变量或模块加载器进行加载// AMD 加载 define(['dep1', 'dep2'], factory);// Node.js 加载 module.exports = factory(require('dep1'), require('dep2'));} else {
rollup 打包utils工具库 完整配置 jest单元测试（index动态加载，按需加载）
Li_Ning21的博客
12-16 872
网上关于使用 rollup 打包工具库的资料可谓是不少，但是似乎都没有贴出对应的package.json,导致虽然内容写的很详细，但是实际安装rollup.js版本的时候，错误百出（版本不一致，很多地方无法兼容）先贴一版package.json，都是亲测可用的{
java 解析umd文件_Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
weixin_35971708的博客
02-24 327
AMD 与 RequireJSAMDAsynchronous Module Definition，用白话文讲就是 异步模块定义，对于 JSer 来说，异步是再也熟悉不过的词了，所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。AMD规范定义了一个自由变量或者说是全局变量 define 的函数。define( id?, dependencies?, fac...
模块加载器 CommonJs / AMD / UMD / ES6
Ammy的成长
12-11 610
CommonJs AMD RequireJs
UMD和ECMAScript模块
服务好姐qa
12-06 7174
From：http://snandy.iteye.com/blog/1450665 博客分类： Modular JS 因为 AMD 和CommonJS的糅合，所以先看看 CommonJS 和 AMD 是什么？ 模块：简单理解就是JS的对象化，比如可写个event事件模块接口。模块返回一个匿名函数，有的返回给一个变量，有的暴露自己，如jQuery暴露自己给win
AMD、CMD、UMD等模块解决方案和工具使用总结
Hibop
12-05 1255
js组件/模块解决方案 AMD、CMD、UMD、ES6、CommonJS的模块处理； 模块处理工具： seajs、requirejs、browserify、webpack、grunt、gulp等
DataV的UMD版踩坑点------css加载顺序
Flying_6的博客
02-11 777
当页面首次加载时，没有使用按F11或F12时，其显示的内容样式如下（完全错位） 当使用了F11或F12时，则正常显示内容 解决办法为：css加载顺序导致的，尝试着换换css的加载顺序
详解jQuery lazyload 懒加载
10-20
Lazy Load是一个用 JavaScript 编写的jQuery插件. 它可以延迟加载长页面中的图片. 本文对它进行实例介绍，具有很好的参考价值，下面跟着小编一起来看下吧
前端图片懒加载(lazyload)的实现方法(提高用户体验)
08-29
图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力,下面通过本文给大家分享图片懒加载lazyload的实现方法，感...
JavaScript实现图片懒加载(Lazyload)
10-21
主要介绍了JavaScript实现图片懒加载(Lazyload)的相关资料,需要的朋友可以参考下
element-admin 不使用路由懒加载的打包问题
八皇叔的博客
02-08 378
element-admin 不使用路由懒加载的打包问题
前端优化——性能提升
AT弄潮儿
07-26 396
优化清单： 1.路由模块按需加载 2.组件懒加载 3.Object.freeze() 冻结不再变更的对象 4.开启productionGzip 压缩 5.合理使用keep-alive保留组件状态,避免重新渲染 6.v-if与v-show根据具体业务场景适当选取 7.图片使用与加载优化 8.大数据列表使用vue-virtual-scroll-list优化 9.配置 exter...
webpack externals
全栈修炼
08-14 1897
webpack externals详解 在众多的webpack配置教程中，对externals这个配置选项，总是一带而过，把文档中提到的几种方式都复述一遍，但是对于开发者而言，根本没法完全理解。本文试图通过一整篇文章，详细的对externals这个参数进行讲解。 几种用法 externals这个参数的传入形式有多种，但是总结而言，实际上就是array > object，reg，这三种形式都可以传入，前者其实是对后者的包含。 array形式 数组内的每一个元素又可以是多种形式，包括object, reg
第三方插件分包 --- 篇幅2
weixin_44065125的博客
12-10 514
第三方插件分包 — 篇幅2 技术路线 编写获取第三方插件的工具类ThirdPartyUtils — 实现懒加载 umd模式下加载文件 动态require引入文件 script标签引入下 动态创建script标签引入第三方插件 多说无益，上代码，ThirdPartyUtils.js const ThirdPartyType = { axios: "axios.min.js", echarts: "echarts.min.js", html2canvas: "html2canvas.
VUE动态加载模块，热插拔。
qq_21306539的博客
12-01 3682
vue模块化加载功能1 如何按照不同的模块进行打包？2如何动态加载？3 生产环境下如何加载子模块4 根据后台传回来的值，加载指定的模块5如何只要一个主模块，子模块后台传输过来注：我的请求后台方法不是用的此项目的方法。改了一丢丢。。。别直接复制。某大叔项目地址：https://gitee.com/itdashu/flick 最近有一个新需求：就是插件化模块。按不同模块打包，如user模块，role模块，打包成不同的main.js，然后在nginx部署一个主模块，按照后台传来的需要加载的模块和js文件，进行加载
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 1309
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
react懒加载lazyload怎么使用
05-19
React.lazy() 函数可以让你轻松地使用懒加载来动态地加载组件，从而提高应用程序的性能。 下面是使用 React.lazy() 和 Suspense 组件的示例： ```javascript import React, { lazy, Suspense } from 'react'; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值