读京东2016版首页改版尝试模拟分层加载首屏。如果一个页面，包含有很多复杂的dom结构，且引用很多资源，这会大大影响页面的响应速度，我们可以把暂且不需要的部分分层异步加载，保证首屏速度。
jd.png
html
<div class="mod_container"> <div class="dir_show"> 首屏直出 </div> <div class="jd_floor_1">楼层1内容</div> <div class="jd_floor_2">楼层2内容</div> <div class="jd_floor_3">楼层3内容</div> <div class="jd_floor_4">楼层4内容</div> <div class="footer"> 底部内容 </div> </div>
css
*{margin:0px;padding:0px;}.dir_show{ height: 1600px; background-color: #FFFACD;
}.jd_floor_1{ background-color: #BBFFFF; height: 520px;
}.jd_floor_2{ background-color: #CAFF70; height: 520px;
}.jd_floor_3{ background-color: #D8BFD8; height: 520px;
}.jd_floor_4{ background-color: #E0FFFF; height: 520px;
}
.footer{ height:250px; background-color: #696969;
}js
document.body : 返回html dom中的body节点 即<body>
document.documentElement : 返回html dom中的root 节点 即<html>
两者存在获取 scrollTop 方面的差异
*实现解释：
1、用于商城的楼层内容异步加载，滚动条滚动时才加载数据
2、如果当前屏幕上显示了好几个楼层，那么同时执行这几个楼层的异步加载
3、如果滚动条在页面中间，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，未显示的不加载
4、如果滚动条在页面下面，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，滚动条向上滚动时才加载上面的楼层
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.1.10.2.js"></script><script>$(function(){ //载入页面时执行加载
jd_floor_judge(); //浏览器滚动时执行加载
$(window).scroll(function(){
jd_floor_judge();
});
});//楼层位置数组,事先算出 var jd_floor_location = new Array();
jd_floor_location[0] = new Array();
jd_floor_location[0]["start"] = 0;
jd_floor_location[0]["end"] = 1600;
jd_floor_location[0]["state"] = false;
jd_floor_location[1] = new Array();
jd_floor_location[1]["start"] = 1600;
jd_floor_location[1]["end"] = 2120;
jd_floor_location[1]["state"] = false;
jd_floor_location[2] = new Array();
jd_floor_location[2]["start"] = 2120;
jd_floor_location[2]["end"] = 2640;
jd_floor_location[2]["state"] = false;
jd_floor_location[3] = new Array();
jd_floor_location[3]["start"] = 2640;
jd_floor_location[3]["end"] = 3160;
jd_floor_location[3]["state"] = false;
jd_floor_location[4] = new Array();
jd_floor_location[4]["start"] = 3160;
jd_floor_location[4]["end"] = 3680;
jd_floor_location[4]["state"] = false;//楼层判断执行函数function jd_floor_judge(){ var floor_getScrollTop = getScrollTop(); //滚动条在Y轴上的滚动距离
var floor_getWindowHeight = getWindowHeight(); //浏览器窗口高度
var min_y = floor_getScrollTop; //触发的最小y值
var max_y = floor_getScrollTop+floor_getWindowHeight; //触发的最大y值
//循环判断
for(var i=1;i<jd_floor_location.length;i++){
var judge_flag_1 = min_y>=jd_floor_location[i]["start"] && min_y<=jd_floor_location[i]["end"]; var judge_flag_2 = max_y>=jd_floor_location[i]["start"] && max_y<=jd_floor_location[i]["end"]; var judge_flag_3 = min_y<=jd_floor_location[i]["start"] && max_y>=jd_floor_location[i]["end"];
if((judge_flag_1 || judge_flag_2 || judge_flag_3) && jd_floor_location[i]["state"]==false){ //改变楼层状态
jd_floor_location[i]["state"] = true;
alert("正在加载第"+i+"个楼层"); //在此处构建ajax请求楼层数据
//处理异步数据的逻辑结构开始
//=================================
//=================================
//处理异步数据的逻辑机构完
}
}
}//滚动条在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;
}</script>
作者：pattyzzh
链接：https://www.jianshu.com/p/fb1dd840fcef
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦