关于图片懒加载

发表于

先po代码如下，

之后再做详细描述

—— emmmm 分割线 ——

现在来说说下面的懒加载的代码

(1)先说思路，所有图片元素img一开始当然是不显示的，辣么给他们的src属性全都值为空，或者全都置为一个default默认图片，在浏览器srcoll触发时，计算并判断img元素是否在当前屏幕可见区域内，在区域内的话，则onload图片。

(2) $.extend使用jquery的extend扩展方法，注意此处 

1
$.extend用在全局对象 $.fn,extend用在实例对象

这里是扩展了全局对象的方法lazyImage，lazyImage里遍历所有图片元素，isView判断图片是否在可是区域内，loadThisImg是加载图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
;(function($){
    function loadThisImg($img){
        $img.attr("src",$img.attr("lazy-src"));
        $img[0].onload = function(){
            $img.removeClass("lazy-img");
        }
    }
    function isView($img,callback){
        var win_h = $(window).height(),
            sTop = $(window).scrollTop(),
            oTop = $img.offset().top,
            h = $img.outerHeight(true);
            if(sTop + win_h > oTop + h && sTop < oTop + h){
                callback($img);
            }
    }
    $.extend({
        lazyImage: function(){
            var lazys = $("body").find("img.lazy-img");
            if(lazys.length>0){
                var timer = null;
                $(window).on("scroll",function(){
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                       lazys.each(function(index,item){
                            var _this = $(this);
                            if(_this.attr("src") !== _this.attr("lazy-src")){
                                isView(_this,loadThisImg);
                            }
                        })
                    },100)
                }).trigger("scroll");
            }
        }
    }) 
})(jQuery)
$.lazyImage();

(3)以上基本配合相应的css样式即可。但是又有一个新的问题，真正的瀑布流加载时，不仅要对图片懒加载，还要根据图像的显示对，元素布局。

可参考以下的代码片段，元素生成时计算图片列的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
//图集布局
$(function(){
    var _t = $('.image_box');
    var tuLayout = {
        getMinColumn:function(obj){
            /**
             * [_min 获取最小高度列]
             * @type {[type]}
             */
            var _min = obj[0],_index;
            $.each(obj,function(index,item){
                if(_min>=obj[index]){
                    _index = index;
                    _min = obj[index];
                }
            });
            return {"index":_index,"min":_min};
        },
        getMaxColumn:function(obj){
            /**
             * [_max 获取最大高度列]
             * @type {[type]}
             */
            var _max = obj[0],_index;
            $.each(obj,function(index,item){
                if(obj[index]>=_max){
                    _index = index;
                    _max = obj[index];
                }
            });
            return {"index":_index,"max":_max};
        }
    }
    tuLayout.init = function(){
            /**
             * [heightObj 记录每列高度]
             * @type {Object}
             */
            var heightObj = {};
            for(var n=0;n<5;n++){
                heightObj[n] = 0;
            }
            var items = $(".image_trunk").find("li");
            $.each(items,function(index,item){
                if(index%5==0){
                    for(var i=0;i<5;i++){
                        var min_index = tuLayout.getMinColumn(heightObj)["index"];
                            items.eq(index-(-i)).animate({
                                "top": heightObj[min_index],
                                "left": 245*min_index+"px"
                            });
                            heightObj[min_index] = parseInt(heightObj[min_index])-(-items.eq(index-(-i)).outerHeight(true));
                            items.eq(index-(-i)).css("position","absolute");
                    }
                }
                if(index===(items.length-1)){
                    var max_height = tuLayout.getMaxColumn(heightObj)["max"];
                        $(".image_trunk").css("height",max_height);
                        // tuLayout.lazyLoad();
                        $.lazyImage();
                }
            })
    }
    if(_t){
        var trunks = {imgs:[]};
            _t.append('<ul class="image_trunk"></ul>');
        var imageJson = $.trim(_t.find('.image_json').html());
        var _imageList = window.JSON ? JSON.parse(imageJson) : eval('(' + imageJson + ')');
            trunks.imgs = _imageList;
        //生成页面dom元素
        function trunksRenderToBox() {
            $.each(trunks.imgs, function (inx, img) {
                if (!img.appended) {
                    img.appended = true;
                    _t.find('.image_trunk').append('<li><a href="" title=""><img class="lazy-img" lazy-src="' + img.src + '" alt="' + img.title + '" width="' + img.width + '" height="' + img.height + '"/></a><a class="img_title">' + img.title + '</a><div class="img_time">' + img.time + '</div></li>');
                }
            });
        }
        //渲染dom样式
        trunksRenderToBox();
        //dom元素重新布局
        tuLayout.init();
    }
})

排列后如下图：

lazyload_demo