image-lazyload/dev/js/demo.js

Loaded images of lazy loading components. Compatible with IE7 + browser.

(function () {
'use strict';

var o = [];
o.push.apply(o, Sizzle('.img'));
o.push.apply(o, Sizzle('.imgBg'));
var lazy = new Lazyload({
    obj: o,
    range: 100 //容差范围
});
//自定义提示
lazy.tips = function (o) {
    var obj = o.o, schedule = o.schedule;
    if (obj.lazy_isEchoTip === undefined) {
        obj.lazy_isEchoTip = true;
        obj.lazy_otip = document.createElement('canvas');
        obj.lazy_otip.className = 'imgLoadTip';
        obj.lazy_otipText = document.createElement('span');
        obj.lazy_otipText.className = 'imgLoadTipText';
        obj.lazy_otipCtx = obj.lazy_otip.getContext('2d');
        obj.lazy_otip.width = 60;
        obj.lazy_otip.height = 60;
        obj.parentNode.insertBefore(obj.lazy_otip, obj.nextSibling);
        obj.parentNode.insertBefore(obj.lazy_otipText, obj.nextSibling);
    }
    var c = obj.lazy_otip, ctx = obj.lazy_otipCtx, w = c.width, h = c.height, r = c.width / 2, deg = Math.PI / 180;
    //绘制背景
    ctx.clearRect(0, 0, w, h);
    ctx.beginPath();
    ctx.arc(r, r, r, 0 * deg, 360 * deg);
    ctx.fillStyle = 'rgba(57,57,57,0.8)';
    ctx.closePath();
    ctx.fill();
    //绘制内圈
    ctx.beginPath();
    ctx.arc(r, r, r - 10, 0 * deg, 360 * deg);
    ctx.fillStyle = 'rgba(0,0,0,0.2)';
    ctx.closePath();
    ctx.fill();
    //绘制进度
    var v = schedule * 360;
    ctx.beginPath();
    ctx.moveTo(r, r);
    ctx.arc(r, r, r - 10, -90 * deg, (-90 + v) * deg);
    ctx.fillStyle = 'rgba(176,227,110,1)';
    ctx.closePath();
    ctx.fill();
    //进度文字
    var text = parseInt(schedule * 100) + '%';
    obj.lazy_otipText.innerHTML = text;
    //删除绘图和提示文字
    if (schedule === 1 && obj.lazy_isEchoTip) {
        obj.parentNode.removeChild(obj.lazy_otip);
        obj.parentNode.removeChild(obj.lazy_otipText);
        obj.lazy_isEchoTip = undefined;
    }
};
lazy.init();

}());
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVtby5lczYiLCJzb3VyY2VzIjpbImRlbW8uZXM2Il0sInNvdXJjZXNDb250ZW50IjpbImxldCBvID0gW107XG5vLnB1c2goLi4uU2l6emxlKCcuaW1nJykpO1xuby5wdXNoKC4uLlNpenpsZSgnLmltZ0JnJykpO1xuXG5sZXQgbGF6eSA9IG5ldyBMYXp5bG9hZCh7XG4gICAgb2JqOm8sICAgICAgICAgIC8v5oeS5Yqg6L295YWD57SgXG4gICAgcmFuZ2U6MTAwICAgICAgIC8v5a655beu6IyD5Zu0XG59KTtcblxuLy/oh6rlrprkuYnmj5DnpLpcbmxhenkudGlwcyA9IChvKT0+e1xuICAgIGxldCBvYmogPSBvLm8sXG4gICAgICAgIHNjaGVkdWxlID0gby5zY2hlZHVsZTtcblxuICAgIGlmKG9iai5sYXp5X2lzRWNob1RpcCA9PT0gdW5kZWZpbmVkKXtcbiAgICAgICAgb2JqLmxhenlfaXNFY2hvVGlwID0gdHJ1ZTtcbiAgICAgICAgb2JqLmxhenlfb3RpcCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2NhbnZhcycpO1xuICAgICAgICBvYmoubGF6eV9vdGlwLmNsYXNzTmFtZSA9ICdpbWdMb2FkVGlwJztcblxuICAgICAgICBvYmoubGF6eV9vdGlwVGV4dCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3NwYW4nKTtcbiAgICAgICAgb2JqLmxhenlfb3RpcFRleHQuY2xhc3NOYW1lID0gJ2ltZ0xvYWRUaXBUZXh0JztcblxuICAgICAgICBvYmoubGF6eV9vdGlwQ3R4ID0gb2JqLmxhenlfb3RpcC5nZXRDb250ZXh0KCcyZCcpO1xuICAgICAgICBvYmoubGF6eV9vdGlwLndpZHRoID0gNjA7XG4gICAgICAgIG9iai5sYXp5X290aXAuaGVpZ2h0ID0gNjA7XG4gICAgICAgIFxuICAgICAgICBvYmoucGFyZW50Tm9kZS5pbnNlcnRCZWZvcmUob2JqLmxhenlfb3RpcCxvYmoubmV4dFNpYmxpbmcpOyBcbiAgICAgICAgb2JqLnBhcmVudE5vZGUuaW5zZXJ0QmVmb3JlKG9iai5sYXp5X290aXBUZXh0LG9iai5uZXh0U2libGluZyk7XG4gICAgfTtcblxuICAgIGxldCBjID0gb2JqLmxhenlfb3RpcCxcbiAgICAgICAgY3R4ID0gb2JqLmxhenlfb3RpcEN0eCxcbiAgICAgICAgdyA9IGMud2lkdGgsXG4gICAgICAgIGggPSBjLmhlaWdodCxcbiAgICAgICAgciA9IGMud2lkdGggLyAyLFxuICAgICAgICBkZWcgPSBNYXRoLlBJLzE4MDtcblxuICAgIC8v57uY5Yi26IOM5pmvXG4gICAgY3R4LmNsZWFyUmVjdCgwLDAsdyxoKTtcblxuICAgIGN0eC5iZWdpblBhdGgoKTtcbiAgICBjdHguYXJjKHIsIHIsIHIsIDAqZGVnLCAzNjAqZGVnKTtcbiAgICBjdHguZmlsbFN0eWxlID0gJ3JnYmEoNTcsNTcsNTcsMC44KSc7XG4gICAgY3R4LmNsb3NlUGF0aCgpO1xuICAgIGN0eC5maWxsKCk7XG5cbiAgICAvL+e7mOWItuWGheWciFxuICAgIGN0eC5iZWdpblBhdGgoKTtcbiAgICBjdHguYXJjKHIsIHIsIHIgLSAxMCwgMCpkZWcsIDM2MCpkZWcpO1xuICAgIGN0eC5maWxsU3R5bGUgPSAncmdiYSgwLDAsMCwwLjIpJztcbiAgICBjdHguY2xvc2VQYXRoKCk7XG4gICAgY3R4LmZpbGwoKTtcbiAgICBcbiAgICAvL+e7mOWItui/m+W6plxuICAgIGxldCB2ID0gc2NoZWR1bGUgKiAzNjA7XG4gICAgXG4gICAgY3R4LmJlZ2luUGF0aCgpO1xuICAgIGN0eC5tb3ZlVG8ocixyKTtcbiAgICBjdHguYXJjKHIsIHIsIHIgLSAxMCwgLTkwKmRlZywgKC05MCArIHYpICpkZWcpO1xuICAgIFxuICAgIGN0eC5maWxsU3R5bGUgPSAncmdiYSgxNzYsMjI3LDExMCwxKSc7XG4gICAgY3R4LmNsb3NlUGF0aCgpO1xuICAgIGN0eC5maWxsKCk7XG5cbiAgICAvL+i/m+W6puaWh+Wtl1xuICAgIGxldCB0ZXh0ID0gcGFyc2VJbnQoc2NoZWR1bGUgKiAxMDApICsgJyUnO1xuICAgIG9iai5sYXp5X290aXBUZXh0LmlubmVySFRNTCA9IHRleHQ7XG4gICAgXG4gICAgLy/liKDpmaTnu5jlm77lkozmj5DnpLrmloflrZdcbiAgICBpZihzY2hlZHVsZSA9PT0gMSAmJiBvYmoubGF6eV9pc0VjaG9UaXApe1xuICAgICAgICBvYmoucGFyZW50Tm9kZS5yZW1vdmVDaGlsZChvYmoubGF6eV9vdGlwKTtcbiAgICAgICAgb2JqLnBhcmVudE5vZGUucmVtb3ZlQ2hpbGQob2JqLmxhenlfb3RpcFRleHQpOyBcbiAgICAgICAgb2JqLmxhenlfaXNFY2hvVGlwID0gdW5kZWZpbmVkO1xuICAgIH07XG59O1xuXG5sYXp5LmluaXQoKTsiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDO0FBQ1gsQ0FBQyxDQUFDLElBQUksT0FBTixDQUFDLEVBQVMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFO0FBQzFCLENBQUMsQ0FBQyxJQUFJLE9BQU4sQ0FBQyxFQUFTLE1BQU0sQ0FBQyxRQUFRLENBQUMsRUFBRTtBQUU1QixJQUFJLElBQUksR0FBRyxJQUFJLFFBQVEsQ0FBQztJQUNwQixHQUFHLEVBQUMsQ0FBQztJQUNMLEtBQUssRUFBQyxHQUFHO0NBQ1osQ0FBQyxDQUFDOztBQUdILElBQUksQ0FBQyxJQUFJLEdBQUcsVUFBQyxDQUFDO0lBQ1YsSUFBSSxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFDVCxRQUFRLEdBQUcsQ0FBQyxDQUFDLFFBQVEsQ0FBQztJQUUxQixJQUFHLEdBQUcsQ0FBQyxjQUFjLEtBQUssU0FBUyxFQUFDO1FBQ2hDLEdBQUcsQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDO1FBQzFCLEdBQUcsQ0FBQyxTQUFTLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNqRCxHQUFHLENBQUMsU0FBUyxDQUFDLFNBQVMsR0FBRyxZQUFZLENBQUM7UUFFdkMsR0FBRyxDQUFDLGFBQWEsR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ25ELEdBQUcsQ0FBQyxhQUFhLENBQUMsU0FBUyxHQUFHLGdCQUFnQixDQUFDO1FBRS9DLEdBQUcsQ0FBQyxZQUFZLEdBQUcsR0FBRyxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbEQsR0FBRyxDQUFDLFNBQVMsQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ3pCLEdBQUcsQ0FBQyxTQUFTLENBQUMsTUFBTSxHQUFHLEVBQUUsQ0FBQztRQUUxQixHQUFHLENBQUMsVUFBVSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsU0FBUyxFQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUMzRCxHQUFHLENBQUMsVUFBVSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsQ0FBQztLQUNsRTtJQUVELElBQUksQ0FBQyxHQUFHLEdBQUcsQ0FBQyxTQUFTLEVBQ2pCLEdBQUcsR0FBRyxHQUFHLENBQUMsWUFBWSxFQUN0QixDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFDWCxDQUFDLEdBQUcsQ0FBQyxDQUFDLE1BQU0sRUFDWixDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQ2YsR0FBRyxHQUFHLElBQUksQ0FBQyxFQUFFLEdBQUMsR0FBRyxDQUFDOztJQUd0QixHQUFHLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBQyxDQUFDLEVBQUMsQ0FBQyxFQUFDLENBQUMsQ0FBQyxDQUFDO0lBRXZCLEdBQUcsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNoQixHQUFHLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsR0FBQyxHQUFHLEVBQUUsR0FBRyxHQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ2pDLEdBQUcsQ0FBQyxTQUFTLEdBQUcsb0JBQW9CLENBQUM7SUFDckMsR0FBRyxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ2hCLEdBQUcsQ0FBQyxJQUFJLEVBQUUsQ0FBQzs7SUFHWCxHQUFHLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDaEIsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQyxHQUFDLEdBQUcsRUFBRSxHQUFHLEdBQUMsR0FBRyxDQUFDLENBQUM7SUFDdEMsR0FBRyxDQUFDLFNBQVMsR0FBRyxpQkFBaUIsQ0FBQztJQUNsQyxHQUFHLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDaEIsR0FBRyxDQUFDLElBQUksRUFBRSxDQUFDOztJQUdYLElBQUksQ0FBQyxHQUFHLFFBQVEsR0FBRyxHQUFHLENBQUM7SUFFdkIsR0FBRyxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ2hCLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ2hCLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsRUFBRSxHQUFDLEdBQUcsRUFBRSxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsSUFBRyxHQUFHLENBQUMsQ0FBQztJQUUvQyxHQUFHLENBQUMsU0FBUyxHQUFHLHFCQUFxQixDQUFDO0lBQ3RDLEdBQUcsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNoQixHQUFHLENBQUMsSUFBSSxFQUFFLENBQUM7O0lBR1gsSUFBSSxJQUFJLEdBQUcsUUFBUSxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDMUMsR0FBRyxDQUFDLGFBQWEsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDOztJQUduQyxJQUFHLFFBQVEsS0FBSyxDQUFDLElBQUksR0FBRyxDQUFDLGNBQWMsRUFBQztRQUNwQyxHQUFHLENBQUMsVUFBVSxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDMUMsR0FBRyxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQzlDLEdBQUcsQ0FBQyxjQUFjLEdBQUcsU0FBUyxDQUFDO0tBQ2xDO0FBQ0wsQ0FBQyxDQUFDO0FBRUYsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDOzs7OyJ9