评论的延迟加载
看verycd、cnbeta的評(píng)論區(qū)域很奇怪,每次看完了正文,再翻到評(píng)論區(qū)評(píng)論區(qū)都顯示“正在加載評(píng)論”,稍等片刻才顯示出來(lái)評(píng)論,評(píng)論的加載當(dāng)然是用ajax實(shí)現(xiàn)的了,但是為什么不管是進(jìn)入頁(yè)面立即看評(píng)論區(qū)還是看帖子一段時(shí)間在看評(píng)論區(qū)都是看的時(shí)候才顯示“正在加載評(píng)論”,好像不看它就不顯示一樣,難道真是哲學(xué)中的“看到的東西才存在”?
經(jīng)過(guò)研究源代碼發(fā)現(xiàn),原來(lái)是程序中在定時(shí)的做判斷,判斷評(píng)論區(qū)是否在顯示范圍之內(nèi),當(dāng)處在顯示范圍之內(nèi)才開始加載評(píng)論。下面的代碼摘選自verycd的代碼,僅供學(xué)習(xí)研究之用。
判斷div是否在瀏覽器可視范圍之內(nèi)的核心代碼:
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("處在可視范圍之內(nèi)了");
??????????? }
?
下面是實(shí)現(xiàn)的全部代碼:
<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加載評(píng)論數(shù)據(jù)了!");
??????????? }
??????????? 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">
??????? 評(píng)論區(qū)域</div>
</body>
</html>
如鵬網(wǎng).Net培訓(xùn)班正在報(bào)名,有網(wǎng)絡(luò)的地方就可以參加如鵬網(wǎng)的學(xué)習(xí),學(xué)完就能高薪就業(yè),點(diǎn)擊此處了解
?
? ??三年前只要懂“三層架構(gòu)”就可以說(shuō)“精通分層架構(gòu)”;現(xiàn)在則需要懂IOC(AutoFac等)、CodeFirst、lambda、DTO等才值錢;
????三年前只要會(huì)SQLServer就可以說(shuō)自己“精通數(shù)據(jù)庫(kù)開發(fā)”;現(xiàn)在則需還需要掌握MySQL等開源數(shù)據(jù)庫(kù)才能說(shuō)是“.Net開源”時(shí)代的程序員;
????三年前只要會(huì)進(jìn)行用戶上傳內(nèi)容的安全性處理即可;現(xiàn)在則需要熟悉云存儲(chǔ)、CDN等才能在云計(jì)算時(shí)代游刃有余;
????三年前只要掌握Lucene.Net就會(huì)說(shuō)自己“熟悉站內(nèi)搜索引擎開發(fā)”;現(xiàn)在大家都用ElasticSearch了,你還用Lucene.Net就太老土了;
????三年前發(fā)郵件還是用SmtpClient;現(xiàn)在做大型網(wǎng)站發(fā)郵件必須用云郵件引擎;
????三年前緩存就是Context.Cache;現(xiàn)在則是Redis、Memcached的天下;
????如鵬網(wǎng)再次引領(lǐng).Net社區(qū)技術(shù)潮流!點(diǎn)擊此處了解如鵬網(wǎng).Net最新課程
總結(jié)
- 上一篇: linux下的dns设置详解
- 下一篇: 一卡通项目总结