https://cogito2012.github.io/js/jquery.lazyload.js

1/**
2 * @author littenli
3 * @date 2014-03-10 version 0.2
4 * @description 图片延时加载，裂图替换，图片错误上报处理
5 * @update 增加非可视区域延时加载
6 * @example $(".container").lazy(options);
7 *          遍历$(".container")节点内的img节点，都应用lazyload；若此节点为img节点，只应用此节点
8 *          options.srcSign {String} 可为空.img节点约定的src标志，默认为lazy-src；响应img节点为：<img lazy-src="img/hello.jpg" />
9 *          options.errCallBack {Function} 可为空.提供img加载失败回调，供业务额外去处理加载失败逻辑
10 *          options.container {Dom} 提供容器节点内可视区域的加载能力，默认为window
11 */
12(function (root, factory) {
13    if (typeof define === 'function' && define.amd) {
14        define(['jquery'], factory);
15    } else {
16        factory(root['jQuery']);
17    }
18}(this, function ($) {
19
20    $.fn.lazyload = function(options) {
21        return this.each(function() {
22
23            options = options || {};
24            var defualts = {};
25
26            var opts = $.extend({}, defualts, options);
27            var obj = $(this);
28            var dom = this;
29
30            var srcSign = options.srcSign || "lazy-src";
31            var errCallBack = options.errCallBack || function(){};
32            var container = options.container || $(window);
33
34            /**
35             * @description src正常
36             */
37            var imgload = function (e, target) {
38                //todo: 上报
39            }
40
41            /**
42             * @description src失效
43             */
44            var imgerr = function (e, target, fn, src) {
45                if(target[0].src && (target[0].src.indexOf("img-err.png")>0 || target[0].src.indexOf("img-err2.png")>0)){
46                    return ;
47                }
48                var w = target.width();
49                var h = target.height();
50                target[0].src = "/img/img-err.png";
51
52                fn();
53                //todo: 上报
54            };
55
56            var tempImg = function(target){
57                var w = target.width();
58                var h = target.height();
59                var t = target.offset().top;
60                var l = target.offset().left;
61                var tempDom = target.clone().addClass("lazy-loding").insertBefore(target);
62                tempDom[0].src = "/img/img-loading.png";
63                target.hide();
64            }
65            /**
66             * @description src替换，loading过程中添加类lazy-loading;
67             */
68            var setSrc = function(target, srcSign, errCallBack){
69
70                if(target.attr("src"))return ;
71
72                if(options.cache == true){
73                    console.log(target);
74                    //存进localstorage
75                    var canvas1 = document.getElementById('canvas1');
76                    var ctx1 = canvas1.getContext('2d');
77                    var imageData;
78
79                    image = new Image();
80                    image.src = target.attr(srcSign);
81                    image.onload=function(){

82                        ctx1.drawImage(image,0,0);
83                        imageData = ctx1.getImageData(0,0,500,250);
84                        console.log(imageData);
85                    }
86
87                }else{
88                    tempImg(target);
89
90                    var src = target.attr(srcSign);
91                    target[0].onerror = function (e) {
92                        imgerr(e, target, errCallBack, src);
93                    };
94                    target[0].onload = function (e) {
95                        target.parent().find(".lazy-loding").remove();
96                        target.show();
97                        imgload(e, target);
98                    }
99                    target[0].src = src;
100                }
101            }
102
103            /**
104             * @description 重组
105             */
106            opts.cache = [];
107
108            if(dom.tagName == "IMG"){
109                var data = {
110                    obj: obj,
111                    tag: "img",
112                    url: obj.attr(srcSign)
113                };
114                opts.cache.push(data);
115            }else{
116                var imgArr = obj.find("img");
117                imgArr.each(function(index) {
118                    var node = this.nodeName.toLowerCase(), url = $(this).attr(srcSign);
119                    //重组
120                    var data = {
121                        obj: imgArr.eq(index),
122                        tag: node,
123                        url: url
124                    };
125                    opts.cache.push(data);
126                });
127            }
128
129
130            //动态显示数据
131            var scrollHandle = function() {
132                var contHeight = container.height();
133                var contop;
134                if ($(window).get(0) === window) {
135                    contop = $(window).scrollTop();
136                } else {
137                    contop = container.offset().top;
138                }
139                $.each(opts.cache, function(i, data) {
140                    var o = data.obj, tag = data.tag, url = data.url, post, posb;
141                    if (o) {
142                        post = o.offset().top - contop, post + o.height();
143
144                        if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {
145                            if (url) {
146                                //在浏览器窗口内
147                                if (tag === "img") {
148                                    //改变src
149                                    setSrc(o, srcSign, errCallBack);
150                                }
151                            }
152                            data.obj = null;
153                        }
154                    }
155                });
156            }
157
158            //加载完毕即执行
159            scrollHandle();
160            //滚动执行
161            container.bind("scroll", scrollHandle);
162            container.bind("resize", scrollHandle);
163
164        });
165    };
166
167}));