`

评论的延迟加载

 
阅读更多

看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>

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    mybatis延迟加载样例

    延迟加载允许我们在真正需要数据时才去加载关联的对象,而不是在查询主对象时一次性加载所有关联数据。 标题中的“mybatis延迟加载样例”意味着我们将探讨如何在MyBatis中实现和使用延迟加载,以及它的具体应用场景...

    jquery图片延迟加载

    **jQuery图片延迟加载技术详解** 在网页设计中,图片加载是一项关键任务,尤其对于内容丰富的网站,如果所有图片一次性加载,可能会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发人员引入了“图片...

    DelayLoadDll_Test_延时加载_延时加载的实现_

    延时加载是一种延迟DLL到运行时按需加载的方法,它不是在进程初始化时加载所有依赖的DLL,而是等到程序真正调用到DLL中的函数时才进行加载。这种技术尤其适用于那些大型或不经常使用的DLL。 2. **工作原理**: - ...

    延迟加载 html优化

    延迟加载的核心思想是只在用户需要时才加载图像或其他资源,而不是一次性全部加载。 首先,我们来详细了解一下延迟加载的基本原理。当一个网页被加载时,通常会包含大量的图像、视频等媒体元素。这些元素往往占据了...

    图片延时加载实例

    图片延时加载是一种优化网页性能的技术,特别是在网页中包含大量图片的情况下。这种技术的主要目的是减少初始页面加载时间,提升用户体验,因为用户在页面首屏显示后通常会更快地看到内容,而不会立即滚动到页面底部...

    图片延迟加载的jq

    图片延迟加载是一种优化网页性能的技术,它通过只加载视口内的图片来减少页面初始化时的数据传输量,提高页面加载速度,提升用户体验。在本场景中,我们关注的是使用jQuery库实现这一功能的jQuery.lazyload插件。 ...

    延迟加载js代码下载(包括页面延迟加载以及图片延迟加载)

    页面延迟加载主要针对非首屏内容,如分页内容、评论区等。利用JavaScript,我们可以判断元素是否在视口内,如果不在,就阻止其加载。当用户滚动到相关区域时,再动态请求并插入HTML。例如,对于分页内容: ```...

    ExtJs GridPanel延时加载.rar

    在给定的"ExtJs GridPanel延时加载.rar"文件中,主要涉及的核心概念是ExtJs中的GridPanel组件以及延时加载技术。GridPanel是ExtJs中一个非常重要的组件,它用于展示表格数据,而延时加载则是一种优化大量数据处理的...

    图片懒加载(延迟加载)

    图片懒加载,也称为延迟加载或On-Demand Loading,是一种优化网页性能的策略,尤其在图像密集型网站中效果显著。这种技术的核心思想是只在用户滚动到图像时才加载它们,而不是一次性加载所有页面资源。这样可以减少...

    jquery 图片延迟加载

    **jQuery图片延迟加载技术详解** 在网页设计中,图片往往是页面加载速度的主要影响因素,尤其当页面包含大量图片时,用户可能需要等待较长时间才能看到完整的内容。为了解决这个问题,"图片延迟加载"(Lazy Load)...

    原生js延迟加载

    在JavaScript的世界里,延迟加载(Lazy Loading)是一种优化网页性能的技术,它允许我们仅在真正需要时才加载资源,如图片、脚本或视频。这种技术可以显著减少初始页面加载时间,提高用户体验,并减少服务器压力。...

    HTML延迟加载图片 html图片延迟加载技术大全.zip

    5. **预加载策略**:除了延迟加载外,还可以考虑预加载策略,例如预加载用户可能滚动到的下一组图片,以减少延迟感,提高用户体验。 总的来说,HTML图片延迟加载技术通过智能地控制图片加载时机,有效地提高了网页...

    图片延时加载demo

    图片延时加载(Lazy Loading)是一种优化网页性能的技术,它主要应用于处理大量图片的网页,目的是提高页面加载速度,减少用户等待时间,并节省网络带宽。在这个“图片延时加载demo”中,我们将深入探讨这一技术的...

    js设置延迟加载

    ### js设置延迟加载 在现代Web开发中,为了提高用户体验并优化资源管理,开发者们常常会用到“延迟加载”(Lazy Loading)技术。本文将详细介绍如何使用JavaScript实现页面元素或功能的延迟加载,帮助读者更好地...

    ext扩展 延时加载

    在IT行业中,"ext扩展 延时加载"是一个关于前端开发的重要概念,特别是对于使用Ext JS框架的应用程序。Ext JS是一个强大的JavaScript库,用于构建数据驱动的富客户端应用程序。延时加载(Lazy Loading)是一种优化...

    hibernate延迟加载解决

    延迟加载是一种优化策略,它使得关联的对象在真正需要时才从数据库中加载,而不是在加载主对象时立即加载所有关联对象。这样可以避免不必要的数据检索,提高应用程序的运行效率。 **2. Hibernate中的延迟加载** 在...

    Mybatis延迟加载和缓存

    延迟加载是一种优化策略,它的核心思想是不立即加载所有数据,而是在实际需要时才进行加载。在 Mybatis 中,延迟加载主要应用于关联对象。例如,当我们查询一个用户时,如果不使用延迟加载,那么用户的订单、地址等...

    JavaScript 封装的延迟加载技术示例 JavaScript 封装的延迟加载技术示例,可以用于加载容器、加载DIV以及加载图片等,可有效降低浏览器损耗,有兴趣可以尝试一番。

    JavaScript延迟加载技术是一种优化网页性能的重要策略,它允许我们按需加载资源,而不是一次性加载所有内容,从而减少了页面初始化时的负担,提升了用户体验。在这个示例中,我们将探讨如何使用JavaScript来封装延迟...

    jquery延迟加载图片

    **jQuery延迟加载图片技术详解** 在网页设计中,图片往往是页面加载速度的瓶颈。为了提高网页的加载效率和用户体验,开发者通常会采用延迟加载(Lazy Loading)技术,尤其是在图片众多的场景下。jQuery库提供了简单...

    延迟加载插件scrollLoading

    延迟加载是一种优化网页性能的技术,它允许我们按需加载页面内容,而不是一次性加载所有资源。在Web开发中,尤其是在移动设备上,这种策略对于提升用户体验和降低服务器压力至关重要。"scrollLoading"是一款针对滚动...

Global site tag (gtag.js) - Google Analytics