1、用于商城的楼层内容异步加载，滚动条滚动时才加载数据
2、如果当前屏幕上显示了好几个楼层，那么同时执行这几个楼层的异步加载
3、如果滚动条在页面中间，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，未显示的不加载
4、如果滚动条在页面下面，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，滚动条向上滚动时才加载上面的楼层
直接上代码：
/**************************start* 懒加载方法(当元素进入在界面中显示触发回调函数)*************************************/ /** * 按数组格式传入 * @param LazyLoadData 要传入的数据 doc:元素节点；state:是否需要懒加载 false需要懒加载 callback: 回调函数 *传入格式: * [{"doc":".header","state": false,"callback": function(){alert(1)}}, {"doc":".yb_louceng_1","state": false,"callback":function(){alert(2)}}] * @return */ function arrayLazyLoad(LazyLoadData){ var yb_getScrollTop = getScrollTop(), //滚动条在Y轴上的滚动距离 yb_getWindowHeight = getWindowHeight(), //浏览器窗口高度 yb_chufa_zuixiao_y = yb_getScrollTop, //触发的最小y值 yb_chufa_zuida_y = yb_getScrollTop+yb_getWindowHeight; //触发的最大y值 //循环判断 for(var i=0;i<LazyLoadData.length;i++){ var yb_doc_start = $(LazyLoadData[i]["doc"]).offset().top, yb_doc_end = yb_doc_start + $(LazyLoadData[i]["doc"]).height(); var yb_panduan_a = yb_chufa_zuixiao_y>=yb_doc_start && yb_chufa_zuixiao_y<=yb_doc_end, yb_panduan_b = yb_chufa_zuida_y>=yb_doc_start && yb_chufa_zuida_y<=yb_doc_end, yb_panduan_c = yb_chufa_zuixiao_y<=yb_doc_start && yb_chufa_zuida_y>=yb_doc_end; if((yb_panduan_a || yb_panduan_b || yb_panduan_c) && LazyLoadData[i]["state"]==false){ LazyLoadData[i]["state"] = true; console.log("正在加载第"+i+"个楼层"); if(typeof callback === "function"){ LazyLoadData[i]["callback"](); } } } } /** * 单个元素传入; * @param objId 元素ID * @param callback 回调函数 * @return */ function lazyLoad(objId,callback){ //检测callback参数是否为函数 if(typeof callback === "function"){ //生成滚轮监听触发事件 var onScroll = function(){ var $obj = $("#"+objId); var objTop = $obj.offset().top; var objBot = objTop + $obj.height(); var scrollTop = getScrollTop(); var scrollBot = scrollTop + getWindowHeight(); //判断元素是否在用户视野内,如果是则触发回调函数,移除监听防止回调函数重复触发 if(objTop <= scrollBot && objBot >= scrollTop){ $(window).off("scroll", onScroll); callback(); } } //开启滚轮监听 $(window).on("scroll", onScroll); $(window).scroll(); } } /**************************end** 懒加载方法(当元素进入在界面中显示触发回调函数)*************************************/ //滚动条在Y轴上的滚动距离 function getScrollTop(){ var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if(document.body){ bodyScrollTop = document.body.scrollTop; } if(document.documentElement){ documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop; } //浏览器视口的高度 function getWindowHeight(){ var windowHeight = 0; if(document.compatMode == "CSS1Compat"){ windowHeight = document.documentElement.clientHeight; }else{ windowHeight = document.body.clientHeight; } return windowHeight; }
可以封装到一个js文件，当作工具类库使用。
测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script type="text/javascript" src=/scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/scripts/common.js"></script> <style> *{margin:0px;padding:0px;} .header{ height: 300px; background-color: #0C3; } .yb_louceng_1{ background-color: #03F; height: 320px; } .yb_louceng_2{ background-color: #F33; height: 250px; } .yb_louceng_3{ background-color: #03F; height: 340px; color: #093; } .yb_louceng_4{ background-color: #F0F; } </style> <script type="text/javascript"> $(function(){ var LazyLoadData =[{"doc":".header","state": false,"callback": function(){console.log(1)}}, {"doc":".yb_louceng_1","state": false,"callback":function(){console.log(2)}}, {"doc":".yb_louceng_2","state": false,"callback" : function(){console.log(3)}}, {"doc":".yb_louceng_3","state": false,"callback" : function(){console.log(4)}}, {"doc":".yb_louceng_4","state": false,"callback" : function(){console.log(5)}}]; arrayLazyLoad(LazyLoadData);
$(window).scroll(function(){
arrayLazyLoad(LazyLoadData);
});
}); </script> </head> <body class="bodycolor" topmargin="5"> <div class="header" id="header">头部内容</div> <div class="yb_louceng_1" id="yb_louceng_1">楼层1内容</div> <div class="yb_louceng_2" id="yb_louceng_2">楼层2内容</div> <div class="yb_louceng_3" id="yb_louceng_3">楼层3内容</div> <div class="yb_louceng_4" id="yb_louceng_4"> 楼层4内容<br/> sd </div> </body> </html>