读京东2016版首页改版尝试模拟分层加载首屏。如果一个页面，包含有很多复杂的dom结构，且引用很多资源，这会大大影响页面的响应速度，我们可以把暂且不需要的部分分层异步加载，保证首屏速度。
jd.png
html
首屏直出楼层1内容楼层2内容楼层3内容楼层4内容底部内容
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节点 即
document.documentElement : 返回html dom中的root 节点 即
两者存在获取 scrollTop 方面的差异
*实现解释：
1、用于商城的楼层内容异步加载，滚动条滚动时才加载数据
2、如果当前屏幕上显示了好几个楼层，那么同时执行这几个楼层的异步加载
3、如果滚动条在页面中间，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，未显示的不加载
4、如果滚动条在页面下面，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，滚动条向上滚动时才加载上面的楼层
作者：pattyzzh
链接：https://www.jianshu.com/p/fb1dd840fcef
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/2752/viewspace-2813008/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
源码阅读-LinkedList
下一篇：
如何理解并正确使用 MySql 索引
请登录后发表评论
登录
全部评论
