jQuery-瀑布流-浮动布局(一)(延迟AJAX加载图片)
2012-05-22 13:36
465 查看
瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
浮动布局:即HTML结构的列,是用浮动方式。
[哇哦-淘宝]http://wow.taobao.com/在线实例!
一、功能分析:
1.判断图片是否进入可视区域;
2.用AJAX请求服务器数据;
3.将数据播入到相应的列队;
二、实现方法:
给window的scroll事件l绑定一个处理函数:做如下工作:
1.如何判断最后一行的图片,是否进入了可视区域?
如果:最后一行的某个图片距离浏览器可视区域顶部的距离值 小于 (可视区域的高度+滚动条滑动的距离值);
那么:就可以判定这个图片进入了浏览器的可视区域;
2.如何用AJAX请求服务器数据;
$.getJSON()方法,直接请求JSON格式的数据;
3.将数据播入到相应的列队;
使用$.each循环,将对应的JSON数据入到对应的列当中
三、注意事项
当在执行AJAX请求的时候,是有数据在传输,所以需要一定的时间,才能获得返回的jSON数据。(有了数据,才能向UL中插入LI)而这个时候,如果用户又一次拖动滚动条,那么上面代码的isSee 还是返回true;所以又会执行AJAX请求。这里我们就需要手动设置一个“开关”,来控制。
只有当数据加载完成后,并且都添加进了对应的UL之后,再次拖动时,打开这个“开关”,即onOff设为true;,
因为数据加载完成后,意味着每列的UL里面,在最后面又多出了刚通过AJAX添加进来的LI数据,所以可以有再次的AJAX请求。
DEMO下载(这个要在本地机器上安装服务器平台。我用的是PHP套装APPSERV,里面的是APACHE)
浮动布局:即HTML结构的列,是用浮动方式。
[哇哦-淘宝]http://wow.taobao.com/在线实例!
一、功能分析:
1.判断图片是否进入可视区域;
2.用AJAX请求服务器数据;
3.将数据播入到相应的列队;
二、实现方法:
给window的scroll事件l绑定一个处理函数:做如下工作:
1.如何判断最后一行的图片,是否进入了可视区域?
如果:最后一行的某个图片距离浏览器可视区域顶部的距离值 小于 (可视区域的高度+滚动条滑动的距离值);
那么:就可以判定这个图片进入了浏览器的可视区域;
2.如何用AJAX请求服务器数据;
$.getJSON()方法,直接请求JSON格式的数据;
3.将数据播入到相应的列队;
使用$.each循环,将对应的JSON数据入到对应的列当中
$(function(){ //判断每个UL的最后一个LI,是否进入可视区域 function see(objLiLast){ //浏览器可视区域的高度 var see = document.documentElement.clientHeight; //滚动条滑动的距离 var winScroll = $(this).scrollTop(); //每个UL的最后一个LI,距离浏览器顶部的 var lastLisee = objLiLast.offset().top return lastLisee < (see+winScroll)?true:false; } //是否请求出AJAX的“开关”; var onOff = true; $(window).scroll(function(){ //拖动滚条时,是否发送AJAX的一个“开关” $("ul").each(function(index, element) { //引用当前的UL var ulThis = this; //引用最后一个LI var lastLi = $("li:last",this); //调用是否进入可视区域函数 var isSee = see(lastLi); if(isSee && onOff){ onOff = false; //发送AJAX请求,载入新的图片 $.getJSON("test1.js",function(data){ //对返回JSON里面的list数据遍历 $.each(data.list,function(keyList,ovalue){ //对LIST里面的SRC数组遍历,取到图片路径 $.each(ovalue,function(keySrc,avalue){ $.each(avalue,function(keysrc1,value1){ var imgLi = $("<li><a href=''><img src='" + value1 + "' alt='' /><p>11111</p></a></li>") $("ul").eq(keysrc1).append(imgLi); }) }) onOff = true; }) }) } }); }) })
三、注意事项
当在执行AJAX请求的时候,是有数据在传输,所以需要一定的时间,才能获得返回的jSON数据。(有了数据,才能向UL中插入LI)而这个时候,如果用户又一次拖动滚动条,那么上面代码的isSee 还是返回true;所以又会执行AJAX请求。这里我们就需要手动设置一个“开关”,来控制。
只有当数据加载完成后,并且都添加进了对应的UL之后,再次拖动时,打开这个“开关”,即onOff设为true;,
因为数据加载完成后,意味着每列的UL里面,在最后面又多出了刚通过AJAX添加进来的LI数据,所以可以有再次的AJAX请求。
DEMO下载(这个要在本地机器上安装服务器平台。我用的是PHP套装APPSERV,里面的是APACHE)
相关文章推荐
- jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
- jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)
- jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)
- jQuery-瀑布流 布局 (处理页面滚动和AJAX加载延迟问题)
- AJAX+json+jquery实现预加载瀑布流布局
- jquery实现简单瀑布流布局(续):图片懒加载
- AJAX+json+jquery实现预加载瀑布流布局
- AJAX+json+jquery实现预加载瀑布流布局
- jQuery实现图片延迟加载
- Lazy Load, 延迟加载图片的 jQuery 插件[转]
- javascript - 简单实现一个图片延迟加载的jQuery插件
- [转]使用jquery插件实现图片延迟加载技术
- jQuery图片预加载(延迟加载)之插件Lazy Load
- 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
- jquery实现 图片延迟加载
- 【javascript】Lazy Load, 延迟加载图片的 jQuery 插件