注册|登录

联系电话:024-31891684  13390130939
沈阳软件公司--沈阳软件定制

沈阳软件开发_沈阳软件公司_沈阳软件定制/软件/最新技术

Latest technology最新技术

瀑布流 -- jQuery技术实现 延迟AJAX加载图片

浏览量:5454

实现方法:
  给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请求。


 查看效果:http://www.eforces.cn/skin/myWaterFallFloat/index.html

下载地址:myWaterFallFloat.rar

沈阳团购网|营口网站制作|沈阳软件公司|软件定制|网站建设|加盟易势|提交问题