easy

DocsVersion : 0.1.1

Lazyload 延迟加载组件

Define in : lazyload.js

延迟加载组件用于对页面中的图片和文档片段进行延迟加载,让页面在初次渲染时不加载图片或者不解析 DOM,以尽可能的提高渲染速度。

Lazyload( target, [ options ] )

依赖
JS : 不依赖
CSS : 不依赖
HTML : 固定
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object。传入的参数是想要延迟加载的 img 元素,或者是用于存放文档片段的 textarea 元素。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
attrName String data-lazysrc

存放图片真实路径的 attribute 特性名,仅对图片加载有效。

axis String y

横向或者纵向滚动触发加载。

x 横向。

y 纵向。

container String|Element|easyJS Object window

设置在哪个容器中滚动,可以是含有滚动条的页面元素。

duration Number 400

动画效果运行的时间,仅对图片加载有效。

easing String swing

动画效果的缓动函数,仅对图片加载有效。

effects String null

显示图片的动画效果,仅对图片加载有效。

fade 淡入淡出。

slideX 由上向下滑动。

slideY 由左向右滑动。

threshold Number 0

距离图片或者文档片段还有一定的距离就开始。

trigger String scroll

触发图片延迟加载的事件,默认为滚动时延迟加载,也可以自定义事件。

type String img

设置延迟加载的类型。

img 图片。

dom 文档片段。

方法
  • on

    对延迟加载实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

下表列出了支持的事件类型。

事件类型 说明 事件对象
load

每个图片或者文档片段在加载完成后触发的事件。

event.target 图片延迟加载时指向加载完的 img 元素,文档片段的延迟加载指向 textarea 的父级元素。

在使用 Lazyload 组件前,对其进行加载。

E.use( 'lazyload', function(){
    // 在回调中实例化延迟加载组件
});

Lazyload 组件需要固定的 HTML 结构,无论是图片还是文档片段必须在外面有一个固定宽高的父元素,下面是图片的结构。

<div><img src="placeholder.png" data-lazysrc="001.jpg" alt="" /></div>

src 是用来存放占位图片的地址,占位图片必须要有,不能为空。data-lazysrc 就是存放真实的图片地址,该名称可以自定义,但是要需要配合参数做出修改。

下面是文档片段延迟加载的结构,所有需要延迟加载的文档片段都存放在一个 textarea 中,并且设置其为隐藏。

<div><textarea style="display:none">
        <div>这里可以放任何你想延迟加载的 HTML 字符串</div>
</textarea></div>
例子1

点击 这里 查看默认效果的图片延迟加载。

例子2

点击 这里 查看横向滚动的图片延迟加载。

例子3

点击 这里 查看自定义容器的图片延迟加载。

例子4

点击 这里 查看DOM的延迟加载。