img.md

lazyload/img

xiaowu

在 lazyload/base 基础上扩展延迟加载图片，同base一样，目标元素（图片）必须有宽高，一般是src属性设置一个空图片，真实图片源在data-src里存放，当滚动判断到可见时则加载这个图片（data-src->src）

use

require([
    'lazyload/img'
], function (Lazyload) {
    var options = {};
    var app = new Lazyload(options);
});

events

同 lazyload/base#events 一致

api - options

在base基础上再次扩展

/**
 * @param {string} options.attr 图片源所在属性
 */

example

滚动加载

<div class="demo"><img src="http://static.meishichina.com/v6/img/blank.gif" alt="延迟加载" data-src="http://dummyimage.com/300x301" width="300" height="300"></div>
<div class="demo"><img src="http://static.meishichina.com/v6/img/blank.gif" alt="延迟加载" data-src="http://dummyimage.com/300x302" width="300" height="300"></div>
<div class="demo"><img src="http://static.meishichina.com/v6/img/blank.gif" alt="延迟加载" data-src="http://dummyimage.com/300x303" width="300" height="300"></div>
<div class="demo"><img src="http://static.meishichina.com/v6/img/blank.gif" alt="延迟加载" data-src="http://dummyimage.com/300x304" width="300" height="300"></div>



<script>
    require([
        'lazyload/img'
    ], function (Lazyload) {
        var app = new Lazyload({
            elem: '.demo img'
        });

        app.on('loaditem', function (data) {
            // 该元素内部的key
            console.log(data.key);

            // 被加载元素的 HTMLElement dom对象
            console.log(data.elem);
        });

        app.on('loadall', function () {
            console.log('loadall');
        });
    });
</script>