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>
</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>
<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>
</body>
</html>
转载于:https://www.cnblogs.com/hhwww/p/10857410.html