概述
在项目当中，以前是用分页效果，由于该次分页效果去掉了，但是需要显示的内容可能又超过了一屏的显示，故用JS整了个延迟加载的效果，达到了之前分页同样的效果，同时用户体验也比之前的要强多了。下面是整个HTML代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文章内容随着页面的滚动条而滚动动态增加显示</title>
<script type="text/javascript" src="js/lib/jquery-1.4.4.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
//文章内容随着页面的滚动条而滚动动态增加显示
(function(window) {
var getMsg = true;
var _target = window;
var t = 0;
function bindEvent(t, e, f) {
if (t.attachEvent) {
t.attachEvent('on' + e, f);
} else if (t.addEventListener) {
t.addEventListener(e, f, false);
}
}
$(document).ready(function() {
//事件监听
bindEvent(_target, 'scroll', function() {
t++;
var top = $(_target.document).scrollTop();
var scrollheight = $(_target.document).scrollTop() +
_target.document.documentElement.clientHeight;
if (top < scrollheight && t < 10) {
//setTimeout('',500);
var st = this.scrollTop;
if (getMsg) {
getMsg = false;
// 从服务器返回后面的列表内容
$.get("divcss/demo2/scripts/load.html", function(data) {
// 将返回结果附加到列表
$("#lazyload").append(data);
$("#lazyload").scroll(st);
getMsg = true;
});
}
}
});
});
})(window);
</script>
<div>
<ul name="lazyload" id="lazyload">
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
<li>age:185<span>2011-12-10 13:15:11</span></li>
</ul>
</div>
</body>
</html>注释：好像在IE下面如果滚动过快，这个效果有时候会有问题，正在考虑优化这个方案。有高手在的，也可以指点一二。
最后
以上就是结实电灯胆为你收集整理的网页内容延迟加载实现方式的全部内容，希望文章能够帮你解决网页内容延迟加载实现方式所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复