tw-lazy-loading v1.3.42
项目名称
tw-lazy-loading 图片懒加载(只针对垂直滚动的情况)
example
可以下载浏览./example/richText.html 启动示例命令行 npm run dev
下载安装
npm install tw-lazy-loading
使用
> import LazyLoad from 'tw-lazy-loading'
let LazyLoad = new LazyLoad(option)
标签引入
<script src="./node_modules/tw-lazy-loading/dist/index.js"></script> let LazyLoad = new window.LazyLoad(option)
监听的img处,添加class值
<img class="tw-laazy-load">
引入dist包下面的index.js 需要使用处参数选项
option = {
minH // 选填,number 屏幕滚动到什么位置时调用图片清晰函数,minH必须为大于等于0的整数
blurParame // 选填,array 图片模糊OSS参数[el1, el2],参数取值范围为1~50,length <= 2
container // 选填, 标签容器,在什么标签内,使用本方法,如document.getElemmentById(ID),vue开发情况下,不能使用refs
delay // 选填 number 屏幕滚动间隔多少毫秒执行一次图片转化为清晰图片的函数, delay必须大于0
}
异步加载懒加载图片数据时需要在异步函数成功后调用
LazyLoad.initPic()
暴露的方法
1、LazyLoad.handleBlur(content) 给富文本添加OSS图片模糊的后缀
@parma content {string} 富文本 @return content
2、LazyLoad.initPic()
页面调用接口,增加了页面的图片数量时,调用此接口,修改图片容器大小,没有返回值
注意事项
如果DOM的IMG标签处,自定义了OSS的模糊句柄,那么需要在option内部传入blurParame 富文本中懒加载图片的class是tw_className,在需要监听处的img的class属性上添加tw_className
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago