- 浏览: 190008 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
看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>
发表评论
文章已被作者锁定，不允许评论。
-
使用SignalR构建一个最基本的web聊天室
2015-01-06 15:09 769使用SignalR，可以使用服务器消息推送到客户端，件demo ... -
一台服务器访问另外一台服务器的共享目录
2014-12-19 10:50 609情况：A服务器的asp.ne程序需访问B服务器的共享目录， ... -
windows7 IIS7报错：如果要使用托管的处理程序，请安装 ASP.NET
2014-12-19 10:31 2415aspx 常见错误 CS0016: 未能写入输出文件“c:/ ... -
windows7 IIS7报错：如果要使用托管的处理程序，请安装 ASP.NET
2014-12-19 10:30 675windows7 IIS7报错：如果要使用托管的处理程序，请 ... -
Cookie小知识
2014-12-17 11:02 599如果cookie设置了过期时间，cookie就会保存在硬盘中 ... -
一个避免用户重复点击按钮造成重复数据的小技巧
2013-01-13 16:13 1231<script> //启用 ... -
SWFupload 上传控件的使用的使用
2012-12-02 16:17 874-- 首先说个解决 ie兼容的标签 <meta ht ... -
SessionID的本质
2012-11-05 23:08 710一、客户端用cookie保存了sessionID 客户 ... -
进程管理运用，防盗链，权限限制
2012-11-05 22:58 595图片防止盗链 void Appl ... -
进程外session配置
2012-11-05 22:57 882进程外session StateServer 对象必须可序列 ... -
分页底层实现（超原理）
2012-10-16 22:19 959--样式 .paginator{ font: 12px ... -
生命周期请求过程
2012-10-07 14:40 743客户端第一步：用户在地址栏里面输入地址，或者是提交表单第二步： ... -
C#，FTP上传的代码 FtpWebRequest
2012-08-24 22:46 964private void Upload(string file ... -
.net ajax控件实现百度，谷歌智能搜索
2012-08-08 22:11 902首先创建一个webservice，不懂也没关系，会用 ... -
asp.net几种开源上传控件，flash,ajax版，支持多文件
2012-08-08 22:11 1948１、AspnetUpload 地址：http://www.a ... -
js和C#中的进制转换方法
2012-08-08 22:12 784在.net Framework中，System.Convert ... -
下拉框下的树形结构数据的绑定
2012-08-12 22:12 856privatevoid BindDropDownLi ... -
Repeater 控件实现无刷新分页
2012-08-12 22:13 1285本文讲述的是如何利用 XMLHttpRequest ... -
.net文件上传的各种操作及创建文件夹和删除上传的文件方法
2012-08-12 22:15 940aspx中<tr><td align=& ... -
使用HTML,CSS快速导出数据到Excel
2012-08-12 22:16 1283一般是导出到txt,csv或excel。txt和cs ...
相关推荐
延迟加载允许我们在真正需要数据时才去加载关联的对象，而不是在查询主对象时一次性加载所有关联数据。 标题中的“mybatis延迟加载样例”意味着我们将探讨如何在MyBatis中实现和使用延迟加载，以及它的具体应用场景...
**jQuery图片延迟加载技术详解** 在网页设计中，图片加载是一项关键任务，尤其对于内容丰富的网站，如果所有图片一次性加载，可能会导致页面加载速度变慢，用户体验下降。为了解决这个问题，开发人员引入了“图片...
延时加载是一种延迟DLL到运行时按需加载的方法，它不是在进程初始化时加载所有依赖的DLL，而是等到程序真正调用到DLL中的函数时才进行加载。这种技术尤其适用于那些大型或不经常使用的DLL。 2. **工作原理**： - ...
延迟加载的核心思想是只在用户需要时才加载图像或其他资源，而不是一次性全部加载。 首先，我们来详细了解一下延迟加载的基本原理。当一个网页被加载时，通常会包含大量的图像、视频等媒体元素。这些元素往往占据了...
图片延时加载是一种优化网页性能的技术，特别是在网页中包含大量图片的情况下。这种技术的主要目的是减少初始页面加载时间，提升用户体验，因为用户在页面首屏显示后通常会更快地看到内容，而不会立即滚动到页面底部...
图片延迟加载是一种优化网页性能的技术，它通过只加载视口内的图片来减少页面初始化时的数据传输量，提高页面加载速度，提升用户体验。在本场景中，我们关注的是使用jQuery库实现这一功能的jQuery.lazyload插件。 ...
页面延迟加载主要针对非首屏内容，如分页内容、评论区等。利用JavaScript，我们可以判断元素是否在视口内，如果不在，就阻止其加载。当用户滚动到相关区域时，再动态请求并插入HTML。例如，对于分页内容： ```...
在给定的"ExtJs GridPanel延时加载.rar"文件中，主要涉及的核心概念是ExtJs中的GridPanel组件以及延时加载技术。GridPanel是ExtJs中一个非常重要的组件，它用于展示表格数据，而延时加载则是一种优化大量数据处理的...
图片懒加载，也称为延迟加载或On-Demand Loading，是一种优化网页性能的策略，尤其在图像密集型网站中效果显著。这种技术的核心思想是只在用户滚动到图像时才加载它们，而不是一次性加载所有页面资源。这样可以减少...
**jQuery图片延迟加载技术详解** 在网页设计中，图片往往是页面加载速度的主要影响因素，尤其当页面包含大量图片时，用户可能需要等待较长时间才能看到完整的内容。为了解决这个问题，"图片延迟加载"（Lazy Load）...
在JavaScript的世界里，延迟加载（Lazy Loading）是一种优化网页性能的技术，它允许我们仅在真正需要时才加载资源，如图片、脚本或视频。这种技术可以显著减少初始页面加载时间，提高用户体验，并减少服务器压力。...
5. **预加载策略**：除了延迟加载外，还可以考虑预加载策略，例如预加载用户可能滚动到的下一组图片，以减少延迟感，提高用户体验。 总的来说，HTML图片延迟加载技术通过智能地控制图片加载时机，有效地提高了网页...
图片延时加载（Lazy Loading）是一种优化网页性能的技术，它主要应用于处理大量图片的网页，目的是提高页面加载速度，减少用户等待时间，并节省网络带宽。在这个“图片延时加载demo”中，我们将深入探讨这一技术的...
### js设置延迟加载 在现代Web开发中，为了提高用户体验并优化资源管理，开发者们常常会用到“延迟加载”（Lazy Loading）技术。本文将详细介绍如何使用JavaScript实现页面元素或功能的延迟加载，帮助读者更好地...
在IT行业中，"ext扩展 延时加载"是一个关于前端开发的重要概念，特别是对于使用Ext JS框架的应用程序。Ext JS是一个强大的JavaScript库，用于构建数据驱动的富客户端应用程序。延时加载（Lazy Loading）是一种优化...
延迟加载是一种优化策略，它使得关联的对象在真正需要时才从数据库中加载，而不是在加载主对象时立即加载所有关联对象。这样可以避免不必要的数据检索，提高应用程序的运行效率。 **2. Hibernate中的延迟加载** 在...
延迟加载是一种优化策略，它的核心思想是不立即加载所有数据，而是在实际需要时才进行加载。在 Mybatis 中，延迟加载主要应用于关联对象。例如，当我们查询一个用户时，如果不使用延迟加载，那么用户的订单、地址等...
JavaScript延迟加载技术是一种优化网页性能的重要策略，它允许我们按需加载资源，而不是一次性加载所有内容，从而减少了页面初始化时的负担，提升了用户体验。在这个示例中，我们将探讨如何使用JavaScript来封装延迟...
**jQuery延迟加载图片技术详解** 在网页设计中，图片往往是页面加载速度的瓶颈。为了提高网页的加载效率和用户体验，开发者通常会采用延迟加载（Lazy Loading）技术，尤其是在图片众多的场景下。jQuery库提供了简单...
延迟加载是一种优化网页性能的技术，它允许我们按需加载页面内容，而不是一次性加载所有资源。在Web开发中，尤其是在移动设备上，这种策略对于提升用户体验和降低服务器压力至关重要。"scrollLoading"是一款针对滚动...