js实现懒加载

来源：互联网发布：二次元背景拍照软件编辑：程序博客网时间：2024/04/30 15:04

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

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>

0 0