首页 > 代码库 > sydr 延迟加载 到底
sydr 延迟加载 到底
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
<title></title>
<script type="text/javascript" src="http://img.cankaoxiaoxi.com/js/lib/jquery.js"></script>
<script>
//滚动条在Y轴上的滚动距离
function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//文档的总高度
function getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
//浏览器视口的高度
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
window.onscroll = function(){
var loadin=document.getElementById("loading");
var ove=document.getElementById("over");
// alert (num);
// alert(oUl[0].children[0]);
if(getScrollTop() + getWindowHeight() == getScrollHeight()){
var oUl = document.getElementsByTagName(‘ul‘);
var num = oUl[0].children.length;
loadin.style.display = "block";
setTimeout(function(){ $.getJSON("http://app.cankaoxiaoxi.com/?app=system&controller=channel_tt&action=index_dr&catid=304&size=5&num=" + num +"&jsoncallback=?", function(data){
if(data)
{//var oUl = document.getElementsByTagName(‘ul‘);
for(var elem in data){
oUl[0].innerHTML=oUl[0].innerHTML+"<li onclick=\"window.location.href=http://www.mamicode.com/‘"+data[elem].url+"‘;\"><div style=\"float:left; display:block;\"><a href=http://www.mamicode.com/""+data[elem].url+"\" title=\""+data[elem].title+"\"><img src=http://www.mamicode.com/""+data[elem].img+"\" /></a></div><div style=\"float:left; margin-top:10px; width:190px; diplay:block;\"><a href=http://www.mamicode.com/""+data[elem].url+"\" title=\""+data[elem].title+"\">"+data[elem].title+"</a></div></li>";
}
}
var num_stat = 0;//用于记录上次的offset
var st = document.documentElement.scrollTop //|| document.body.scrollTop;//滚去的高度
if(st ==0)
{var st = document.body.scrollTop;}
var ch = document.documentElement.clientHeight;//窗口的高度
var at = document.getElementById("bm").offsetTop;//元素离页面顶部的高度
var v = ch - (at - st);//元素离窗口底部的高度,为负的话表示元素还在窗口底部下面
if(v >= 20 && num > num_stat){
num_stat = num;
loadin.style.display = "none";
ove.style.display = "block";
}
});
},2000)
}
}
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src=http://www.mamicode.com/‘" + _bdhmProtocol + "hm.baidu.com/h.js%3F308b87570281daa02f0d31c085c39163‘ type=‘text/javascript‘%3E%3C/script%3E"));
</script>
</head>
<body>
<style>
*{margin:0; padding:0;}
a, a:visited {text-decoration:none;}
.list img {width:90px; heiht:68px;float:left; margin:7px 15px 7px 9px; border-radius:10px;border:none;}
.list img:nth-child(1) {margin:9px 15px 7px 9px;}
.list li {height:82px; border-top:1px solid #cccccc; list-style:none; clear:both;}
.list li:nth-child(1) {border-top:none;}
.list a {color:#000000; font-size:16px; line-height:20px; font-family:"微软雅黑";}
</style>
<!--要闻 start-->
<article>
<section class="pindao">
<ul class="list">
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0719/429697.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0719/429697.shtml" title="Keep your eyes peeled：保持高度警觉"><img src="http://upload.cankaoxiaoxi.com/2014/0719/1405735344312.jpg" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0719/429697.shtml" title="Keep your eyes peeled：保持高度警觉">Keep your eyes peeled：保持高度警觉</a></div>
</li>
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0709/418482.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0709/418482.shtml" title="Bow to pressure：迫于压力做出让步"><img src="http://upload.cankaoxiaoxi.com/2014/0709/1404891914252.jpg" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0709/418482.shtml" title="Bow to pressure：迫于压力做出让步">Bow to pressure：迫于压力做出让步</a></div>
</li>
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0709/418463.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0709/418463.shtml" title="Charge rage：充电愤怒症"><img src="http://upload.cankaoxiaoxi.com/2014/0709/1404891358726.png" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0709/418463.shtml" title="Charge rage：充电愤怒症">Charge rage：充电愤怒症</a></div>
</li>
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0704/412923.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0704/412923.shtml" title="You are a star：你真棒"><img src="http://upload.cankaoxiaoxi.com/2014/0704/1404451802204.jpg" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0704/412923.shtml" title="You are a star：你真棒">You are a star：你真棒</a></div>
</li>
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0627/407291.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0627/407291.shtml" title="中国外交强硬语气翻译指南"><img src="http://upload.cankaoxiaoxi.com/2014/0627/1403854217991.png" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0627/407291.shtml" title="中国外交强硬语气翻译指南">中国外交强硬语气翻译指南</a></div>
</li>
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0626/406203.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0626/406203.shtml" title="Perfection fatigue：完美疲劳"><img src="http://upload.cankaoxiaoxi.com/2014/0626/1403744955754.jpg" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0626/406203.shtml" title="Perfection fatigue：完美疲劳">Perfection fatigue：完美疲劳</a></div>
</li>
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0625/405746.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0625/405746.shtml" title="美国人为何把足球叫“soccer”？"><img src="http://upload.cankaoxiaoxi.com/2014/0626/1403745469829.jpg" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0625/405746.shtml" title="美国人为何把足球叫“soccer”？">美国人为何把足球叫“soccer”？</a></div>
</li>
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0619/403109.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0619/403109.shtml" title="Clicktivism：点击行动主义"><img src="http://upload.cankaoxiaoxi.com/2014/0619/1403168667593.jpg" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0619/403109.shtml" title="Clicktivism：点击行动主义">Clicktivism：点击行动主义</a></div>
</li>
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0619/402834.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0619/402834.shtml" title="Foul play：犯规"><img src="http://upload.cankaoxiaoxi.com/2014/0619/1403144117335.jpg" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0619/402834.shtml" title="Foul play：犯规">Foul play：犯规</a></div>
</li>
<li onClick="window.location.href=http://www.mamicode.com/‘http://m.cankaoxiaoxi.com/diglossia/2014/0616/401469.shtml‘;">
<div style="float:left; display:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0616/401469.shtml" title="Goal-line technology：门线技术"><img src="http://upload.cankaoxiaoxi.com/2014/0616/1402907925590.jpg" /></a></div>
<div style="float:left; margin-top:10px; width:190px; diplay:block;"><a href="http://m.cankaoxiaoxi.com/diglossia/2014/0616/401469.shtml" title="Goal-line technology：门线技术">Goal-line technology：门线技术</a></div>
</li>
</ul>
<br>
<div id="loading" style="background:linear-gradient(-90deg,#fff,#999); display:none; color:#000; width:145px; line-height:20px; position:absolute; padding:0 3px";>正在加载中...</div>
<div id="over" style="background:white; display:none; color:#999; width:333px; line-height:20px; position:absolute; padding:0 3px";> 已到最底部</div>
</section>
</article>
<div class="footer" id="bm">
</div>
<!--要闻 end-->
</body>
</html>
sydr 延迟加载 到底