长页面拆分成为首屏和楼层加载
2018-07-07 本文已影响36人
卓三阳
读京东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" src="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>
