求JS延迟加载效果。

baysos 2011-09-26 03:35:55
不用jquery,不用其他任何公共框架,只用纯JS操作。
效果大概就是QQ空间里看好友动态,一边下拉,当滚动条滚到特定一个div时,加载更多的dom元素。
现在卡在 clientHeight,offsetTop等一大堆网页高度上面,概念有点模糊..……最好举个例子,感谢。
...全文
156 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
md5e 2011-09-26
  • 打赏
  • 举报
回复
var w=($("dv_datalist").scrollHeight - $("dv_datalist").offsetHeight);
if(($("dv_datalist").scrollTop * 100)/w>=80)
{
莫舍桥西 2011-09-26
  • 打赏
  • 举报
回复
javascript code
<script type="text/javascript">
//wait style
function ShowWaiting()
{
document.getElementById('doing').style.visibility = 'visible';
}
function CloseWaiting()
{
document.getElementById('doing').style.visibility = 'hidden';
}
function MyOnload()
{
document.getElementById('doing').style.visibility = 'hidden';
}

if (window.onload == null)
{
window.onload = MyOnload;
}
</script>
body code
<div id='doing' style='Z-INDEX: 12000; LEFT: 0px; WIDTH: 100%; CURSOR: wait; POSITION: absolute; TOP: 0px; HEIGHT: 100%'>
<table width='100%' height='100%' id="Table1">
<tr align='center' valign='middle'>
<td style="width: 781px" >
<table id="Table2" class="loading">
<tr align='center' valign='middle'>
<td>
<img src="../images/loading1.gif" /><br>Loading...</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
baysos 2011-09-26
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 liuchaolin 的回复:]
<script>
var _selectrow;
var _selectid;
var _flang=false;
var _issetsize=false;
var _bodyHeight=document.documentElement.clientHeight;

function getData(flang)
{
var datalist=$("dv_datalist……
[/Quote]
小弟愚笨,判断滚动条滚到指定位置的是这行么:
if(($("dv_datalist").scrollTop * 100)/w>=80 || flang==1)
md5e 2011-09-26
  • 打赏
  • 举报
回复
<script>
var $ = function (objId) {
return document.all ? document.all[objId] : document.getElementById(objId);
}
</script>
md5e 2011-09-26
  • 打赏
  • 举报
回复
<script>
var _selectrow;
var _selectid;
var _flang=false;
var _issetsize=false;
var _bodyHeight=document.documentElement.clientHeight;

function getData(flang)
{
var datalist=$("dv_datalist").getElementsByTagName("ul");
if(datalist.length<parseInt($("hf_rowcount").value) && !_flang)
{
var w=($("dv_datalist").scrollHeight - $("dv_datalist").offsetHeight);
if(($("dv_datalist").scrollTop * 100)/w>=80 || flang==1)
{
_flang=true;
$('hf_pageindex').value= parseInt($("hf_pageindex").value) + 1;
var url="project_list_ajax.aspx?no-cache="+Math.random();

var Action = 'pageindex='+ escape($('hf_pageindex').value) + getParameters() ;
var options={
method:'post',
parameters:Action,
onComplete:function(transport)
{
var returnvalue=transport.responseText;
var ary_txt=returnvalue.split("<!--item-->");
if(ary_txt.length==2)
{
$("hf_rowcount").value=ary_txt[0];
$("dv_datalist").innerHTML +=ary_txt[1];
resize(3);
setDivEve();
_flang=false;
}
}
};
new Ajax.Request(url,options);
}
}
}

</script>

.... onscroll="getData();"

62,025

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧