评论的延迟加载
来源:互联网 发布:青少年编程培训 编辑:程序博客网 时间:2024/05/16 10:26
评论的延迟加载
看verycd、cnbeta的评论区域很奇怪,每次看完了正文,再翻到评论区评论区都显示“正在加载评论”,稍等片刻才显示出来评论,评论的加载当然是用ajax实现的了,但是为什么不管是进入页面立即看评论区还是看帖子一段时间在看评论区都是看的时候才显示“正在加载评论”,好像不看它就不显示一样,难道真是哲学中的“看到的东西才存在”?
经过研究源代码发现,原来是程序中在定时的做判断,判断评论区是否在显示范围之内,当处在显示范围之内才开始加载评论。下面的代码摘选自verycd的代码,仅供学习研究之用。
判断div是否在浏览器可视范围之内的核心代码:
var obj = document.getElementById('testDiv');
var dom = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body;
var scrollTop = dom.scrollTop || document.body.scrollTop || 0;
if (obj.offsetTop - scrollTop - dom.clientHeight < 100) {
alert("处在可视范围之内了");
}
下面是实现的全部代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function check() {
var obj = document.getElementById('testDiv');
var dom = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body;
var scrollTop = dom.scrollTop || document.body.scrollTop || 0;
if (obj.offsetTop - scrollTop - dom.clientHeight < 100) {
alert("开始AJAX加载评论数据了!");
}
else {
setTimeout("check()", 1000);
}
}
setTimeout("check()", 1000);
</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="testDiv">
评论区域</div>
</body>
</html>
- 评论的延迟加载
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- iBATIS的延迟加载
- spring 的延迟加载
- 延迟加载的学习
- iBATIS的延迟加载
- hibernate的延迟加载
- Hibernate的延迟加载
- hibernate 的延迟加载
- hibernate的延迟加载
- hibernate的延迟加载
- Ibatis的延迟加载
- 图片的延迟加载
- 图片的延迟加载
- Hibernate 的延迟加载
- Hibernate的延迟加载
- Hibernate的延迟加载
- 服务器托管/租用的异同
- Android DrawerLayout 高仿QQ5.2双向侧滑菜单
- 关于字体库的制作
- ubuntu 安装 rJava 出错解决方案
- 单元测试学习1
- 评论的延迟加载
- Leetcode 3Sum Closest
- MAX 4000
- 计算机视觉和模式识别的源码集
- 机器学习视频教程
- Machine_learning--score
- 总结iOS 8和Xcode 6的各种坑
- Java 理论与实践: 处理 InterruptedException
- windows下编译wxwidgets、boost并加入到codeblocks路径中去