《前端工程体验优化实战》 第15节配套项目
:star: 特性
- 懒加载
<img>
、<iframe>
、<video>
、<picture>
、CSSbackground-image
等各类元素和CSS属性。 - 体积极小:源码仅4.7 KB,GZip压缩后2 KB
- 浏览器兼容性好:支持
IE11
- 支持多环境、多种模块化方案运行:Node.js
CJS
模块,浏览器平台UMD
模块、ES Module
:zap: 在线DEMO
lazyload-all 在线运行DEMO:rocket: 使用指南
- 安装
通过NPM下载安装代码$ npm install --save lazyload-all
- 运行
- Node.js 环境
const { initLazyloadAll } = require('lazyload-all');
const lazyLoadeAllInstance = initLazyloadAll();
- Webpack 环境
import { initLazyloadAll } from 'lazyload-all';
const lazyLoadeAllInstance = initLazyloadAll();
- 浏览器环境
<script src="node_modules/lazyload-all/dist/index.aio.js"></script>
<script>
const lazyLoadeAllInstance = window.LazyLoadAll.initLazyloadAll();
</script>
- 初始化参数
| 参数属性名 | 简介 | 默认值 | 可选值 |
| ------------- | ------------------------------------------------------------------------ | ------------------------ | ----------------------------------------------- |
| mode
| 懒加载使用的API,支持基于scroll 事件
和IntersectionObserver API
2种。 | 'intersectionObserver'
| 1. 'intersectionObserver'
2.
'scroll'
|
| once
| 触发加载后,是否不再对目标元素执行监听逻辑。 | true
| 1. true
2.
false
|
| afterLoadCb
| 触发加载后,执行的回调函数。 | undefined
| function(ele: HTMLElement): void
|- 实例方法
update()
用于懒加载元素增加后调用,从而监视新出现的懒加载目标元素。update()
const lazyLoadeAllInstance = initLazyloadAll({
// mode: MODES.scroll,
// mode: MODES.intersectionObserver,
once: true,
});
// 懒加载元素增减后,更新监视目标
lazyLoadeAllInstance.update();
本地开发
- 运行开发环境
$ npm run dev
打开练习场地:
/lazyload-all/demo/demo-amd.html
- 打包生产代码
$ npm run build
- 运行单元测试
$ npm test
注意:浏览器环境需要手动测试,位于test/browser
- 发布新版本
修改 package.json 中的版本号,将新版本发布到NPM$ npm publish
:openfilefolder: 目录介绍
.
├── demo 使用demo
├── dist 编译产出代码
├── doc 项目文档
├── src 源代码目录
├── test 单元测试