lazyload-all

《前端工程体验优化实战》 第15节配套项目

:star: 特性

• 懒加载 <img>、<iframe>、<video>、<picture>、CSS background-image等各类元素和CSS属性。
• 体积极小：源码仅4.7 KB，GZip压缩后2 KB
• 浏览器兼容性好：支持IE11
• 支持多环境、多种模块化方案运行：Node.js CJS模块，浏览器平台UMD模块、ES Module

:zap: 在线DEMO

lazyload-all 在线运行DEMO

:rocket: 使用指南

1. 安装

通过NPM下载安装代码

$ npm install --save lazyload-all

2. 运行

1. Node.js 环境

const { initLazyloadAll } = require('lazyload-all');

const lazyLoadeAllInstance = initLazyloadAll();

2. Webpack 环境

import { initLazyloadAll } from 'lazyload-all';

const lazyLoadeAllInstance = initLazyloadAll();

3. 浏览器环境

<script src="node_modules/lazyload-all/dist/index.aio.js"></script>
<script>
  const lazyLoadeAllInstance = window.LazyLoadAll.initLazyloadAll();
</script>

3. 初始化参数

| 参数属性名 | 简介 | 默认值 | 可选值 | | ------------- | ------------------------------------------------------------------------ | ------------------------ | ----------------------------------------------- | | mode | 懒加载使用的API，支持基于scroll 事件和IntersectionObserver API 2种。 | 'intersectionObserver' | 1. 'intersectionObserver' 2. 'scroll' | | once | 触发加载后，是否不再对目标元素执行监听逻辑。 | true | 1. true 2. false | | afterLoadCb | 触发加载后，执行的回调函数。 | undefined | function(ele: HTMLElement): void |

4. 实例方法

1. update()

用于懒加载元素增加后调用，从而监视新出现的懒加载目标元素。

const lazyLoadeAllInstance = initLazyloadAll({
  // mode: MODES.scroll,
  // mode: MODES.intersectionObserver,
  once: true,
});

// 懒加载元素增减后，更新监视目标
lazyLoadeAllInstance.update();

本地开发

1. 运行开发环境

$ npm run dev

打开练习场地：/lazyload-all/demo/demo-amd.html

2. 打包生产代码

$ npm run build

3. 运行单元测试

$ npm test

注意：浏览器环境需要手动测试，位于test/browser

4. 发布新版本

修改 package.json 中的版本号，将新版本发布到NPM

$ npm publish

:open_file_folder: 目录介绍

.
├── demo 使用demo
├── dist 编译产出代码
├── doc 项目文档
├── src 源代码目录
├── test 单元测试