|
做web开发的朋友都应该掌握前端优化这个技巧其中一个就是滚动延时加载这个技巧应用在了很多地方比如新浪微博网页版以下就为大家详细介绍需要的朋友可以参考下 为什么要延时加载呢？页面加载的时候就显示全部的图片不就得了？有必要多此一举吗？答案是肯定的当要加载的图片或者内容很多时如果一次性加载完 毕那么整个页面将会加载很久意味着要用户等待很久这是对用户不友好的或许你还会问那不就做个分页不就得了？其实这种滚动延时加载的技巧正是用来 代替手动点击下一页的分页技术每换一页都要用户点击一次这也是对用户不友好的所以才有了滚动延时加载 我这里把加载图片作为例子就好像百度图片里的一样你往下滚动它就会继续显示下一页的图片 要求是这样的比如我要加载张图片在页面加载完毕后我先加载张（前提是张已经占满浏览器窗口高度）当滚动条滚动到浏览器底部的时候再加载张一共加载次 原理是这样的先获取当前浏览器的窗口高度a然后给页面绑定一个滚动条滚动事件当滚动条滚动的时候首先判断时候已经加载了张如果小于张再获取当前文档距离顶部的高度b以及图片内容的高度c如果a+b>=c继续加载张图片 我说过我喜欢以尽可能少的代码以及尽可能简单的demo来为有需要的人展示一些强大的功能因为所有的东西原理其实都很简单越简单的demo越容易让人理解和接受所以代码很少直接上代码
复制代码 代码如下:
<!DOCTYPE html>
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>页面滚动延迟加载图片</title>
<style type="text/css">
body {
margin: px;
}
ul {
liststyle: none;
margin: px;
padding: px;
}
</style>
<script type="text/javascript" src="jqueryminjs"></script>
<script type="text/javascript">
var n = ;
var winHeight = $(window)height();
$(function () {
loadimg();
$(window)scroll(function () {
if (n < ) {
var docTop = $(document)scrollTop();
var contentHeight = $("#content")height();
if (docTop + winHeight >= contentHeight ) {
loadimg();
}
}
});
});
function loadimg() {
for (i = ; i < ; i++) {
$("#content")append("<li><img src=jpg/></li>");
}
n += ;
}
</script>
</head>
<body>
<ul id="content">
</ul>
</body>
</html>
这 里使用了jqury框架是为了让代码更少更简单如果你可以手写纯js代码来实现这个功能当然最好不过毕竟是优化这个小小的功能也不需要使用到任何 js框架不过个人比较喜欢jquery框架毕竟在大项目中手写纯js代码将会严重拖慢整个项目的进度有一个强大的js框架摆在面前合理运用还是 能提高开发效率的而且在一个大项目中jquery不是仅仅能帮你实现这个小小的功能而已像Ajax它是能轻轻松松就能帮你搞定的另外我这里只是 写死了加载这一张图片事实上它应该是使用Ajax来请求新的图片然后加载到页面里的因为想尽量简单就没有涉及后台逻辑所以只加载这一张图片
你可能会注意到这句代码docTop + winHeight >= contentHeight 这里我为什么要呢？如果不在IEFirefox下测试时通过的但是在Chrome下就不行了因为在Chrome下docTop + winHeight是永远比contentHeight小的而在前两个浏览器里docTop + winHeight是比contentHeight大的这个是浏览器的问题我们只能去兼容它们最简单的方法就是不一定要滚动到底部滚动到距离底 部还有个像素的时候就可以加载新的图片了 |
