js实现懒加载

懒加载就是在可视区域内的图像进行加载，当下拉滚动后变加载当前可视区域的图像，该技术减缓了服务器端的压力，优化了用户体验功能。直接上代码

var totalIndex, totalLen, totalObj, totalF;
        var totalOfile = new Array();
        function isAtWindow(item) {
            return (jQuery(window).scrollTop() > (item.offsetTop + item.outerHeight))
                    || ((jQuery(window).scrollTop() + jQuery(window).height()) < item.offsetTop)
        }
        function getNeighbourEleLength(index){
            var count = 0;
            $divTemp = $("#src-div" + index.toString());
            while(true){
                $divTemp = $divTemp.next();
                if($divTemp[0].tagName == "IMG"){
                    count++;
                }else{
                    break;
                };
            }   
            return count;
        }

         removeImg = function(){
            for(var i = 1; i < $(".sp-big-img").length; i = i + 1){
                var length = getNeighbourEleLength(i);
                for(var j = 0;  j < length - 1; j = j + 1){
                    $("#src-div" + i.toString()).next().remove();
                }
            }
        }

        $(window).bind(
                "scroll",
                function(event) {
                    if ($(".sp-big-img").length >= 10) {
                        $(window).unbind("srcoll");
                        removeImg();
                    }
                    if (!isAtWindow(document.getElementById("src-div"
                            + (totalIndex + 1).toString()))) {
                        totalF(totalIndex, totalOfile, totalLen, totalObj);
                        totalIndex = totalIndex + 1;
                    }
                });
        function Load_pic(arr) {
            this.loop_f = function(i, o_file, len, f, obj) {
                if (i < len - 1) {
                    i = i + 1;
                    //默认已经加载了第一张图，检查第二个div是否在可视区域,如果在就加载，不在就不加载
                    if (!isAtWindow(document.getElementById("src-div"
                            + (i + 1).toString()))) {
                            totalIndex = i;
                            totalOfile = o_file;
                            totalLen = len;
                            totalF = f;
                            totalObj = obj;
                            totalF(totalIndex, totalOfile, totalLen, totalObj);

                    } else {
                        removeImg();
                        totalIndex = i;
                        totalOfile = o_file;
                        totalLen = len;
                        totalF = f;
                        totalObj = obj;
                    }
                }
            };

            this.creat_pic = function(i, o_file, len, obj) {
                var f = arguments.callee, doc = document, image = doc
                        .createElement("img");//创建img节点
                image.className = "sp-big-img";
                image.src = o_file[i];
                image.style.width = '100%';
                div = doc.getElementById("src-div" + (i + 1).toString());
                i < len ? doc.getElementsByTagName("body")[0].insertBefore(image,
                        div) : '';//将图片插入到src-div(1-10)之前，这句话看你的布局了
                if (navigator.userAgent.indexOf("MSIE") > 0) { //navigator返回文档对象所有嵌入式对象引用，返回由客户机发送服务器的 user-agent 头部的值。
                    if ($.browser.version == 6.0 || $.browser.version == 9.0) { //IE9和IE6一样  微软真是怪异
                        image.onreadystatechange = function() {
                            if (image.readyState == "complete") {
                                obj.loop_f(i, o_file, len, f, obj);
                            }
                        };
                    } else {
                        ie7imagetime = window.setInterval(function() {
                            var rs = image.readyState;
                            if (rs == "complete") {
                                window.clearInterval(ie7imagetime);
                                obj.loop_f(i, o_file, len, f, obj);
                            } else {
                                return;
                            }
                        }, 200);
                    }
                } else {
                    image.onload = function() {
                        if (image.complete == true) {
                            obj.loop_f(i, o_file, len, f, obj);
                        }
                    };
                }
            };
            if (arr.constructor === Array) {
                var len = arr.length, i = 0;
                i < len ? this.creat_pic(i, arr, len, this) : '';

            }
            ;
        }
        new Load_pic([ 'images/sales_promotion1.jpg',
                'images/sales_promotion2.jpg', 'images/sales_promotion3.jpg',
                'images/sales_promotion4.jpg', 'images/sales_promotion5.jpg',
                'images/sales_promotion6.jpg', 'images/sales_promotion7.jpg',
                'images/sales_promotion8.jpg', 'images/sales_promotion9.jpg',
                'images/sales_promotion10.jpg', ]);

    });

下面是我的布局

<div class="chunji-middle-bar" id="src-div1">
        <img src="images/middle_bar_font1.png" style="width: 50%;" />
    </div>

    <div class="chunji-middle-bar" id="src-div2">
        <img src="images/middle_bar_font2.png" style="width: 65%;" />
    </div>

    <div class="chunji-middle-bar" id="src-div3">
        <img src="images/middle_bar_font3.png" style="width: 50%;" />
    </div>

    <div class="chunji-middle-bar" id="src-div4">
        <img src="images/middle_bar_font4.png" style="width: 50%;" />
    </div>

    <div id="src-div5"></div>

    <div id="src-div6"></div>
    <div id="src-div7"></div>
    <div id="src-div8"></div>
    <div class="chunji-middle-bar">
        <img src="images/middle_bar_font5.png" style="width: 50%;" />
    </div>

    <div id="src-div9"></div>
    <div id="src-div10"></div>