向下滚动页面加载图片的js
2013-07-03 10:33
295 查看
js代码 scroll.photo.js :
页面代码 :
window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图片数组 [{ url: "/CMF01_000.jpg"},{ url: "/CMF01_001.jpg"}] img_max: 0, //图片数量 img_num: 0, //图片累计已加载的数量 step_max: 3, //每轮加载图片的数量 从0开始计数 step_num: 0, //每轮已加载图片的数量 img_obj: new Image(), s_scroll: 0, //滑动条的Y轴位置 w_height: 0, //页面内容的高度 l_height: 500, //小于此参数则开始加载图片 w_width: 640 //浏览器窗口宽度 }, onLoad: function(){ if(this.options.img_num >= this.options.img_max){ $("#img_load").hide(); //隐藏loading图标 return; } this.options.img_obj.src = this.options.img_list[this.options.img_num].url; this.options.img_obj.onload = function(){ imgscroll.endLoad(this.width); }; }, endLoad: function(width){ width = this.options.w_width > width? width+"px": "98%"; this.options.target.append('<div style="text-align:center;color:#999;padding-bottom:10px;"><img src="'+this.options.img_list[this.options.img_num].url+'" width="'+width+'"><br /><span>'+ (this.options.img_num+1) +'/'+ this.options.img_max +'</span></div>'); this.options.img_num += 1; if(this.options.step_num < this.options.step_max){this.options.step_num += 1; this.onLoad(); }else{ //结束一轮加载后将每轮已加载图片数量归零 this.options.step_num = 0; } }, beLoad: function(target,img_list){ this.options.target = target; this.options.img_list = img_list; this.options.img_max = img_list.length; this.options.l_height = $(window).height()*2; this.options.w_width = $("body").width(); //绑定滑动条的判定 $(window).scroll(function(){ imgscroll.options.s_scroll = $(window).scrollTop(); imgscroll.options.w_height = $("body").height(); if((imgscroll.options.w_height-imgscroll.options.s_scroll) < imgscroll.options.l_height){ if(imgscroll.options.step_num < 1) imgscroll.onLoad(); } }); this.onLoad(); } };
页面代码 :
<!DOCTYPE html> <html> <head> <title>向下滚动页面加载图片</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/scroll.photo.js"></script> <script type="text/javascript">var imglist = [{ url: "CMF01_000.jpg"},{ url: "CMF01_001.jpg"},{ url: "CMF01_002.jpg"},{ url: "CMF01_003.jpg"},{ url: "CMF01_004.jpg"},{ url: "CMF01_005.jpg"},{ url: "CMF01_006.jpg"}]; $(function(){ imgscroll.beLoad($("#img_list"),imglist); }); </script> </head> <body style="background:#444;padding-top:20px;"> <div id="img_list"></div> <div id="img_load" style="text-align:center;color:#AAA;"><img src="loading.gif" /><br /><span>少女读取中...</span></div> </body> </html>
相关文章推荐
- 意外发现--玩“JS实现的页面滚动图片加载”效果
- 原生Js页面滚动延迟加载图片
- js实现监听页面滚动实现图片延迟加载
- 原生js页面滚动延迟加载图片
- js实现一个长页面中的图片懒加载即滚动到其位置才加载
- 原生js页面滚动延迟加载图片
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
- 原生Js页面滚动延迟加载图片实现原理及过程
- JS图片无缝、平滑滚动代码,多用于推广页面
- struts2使用action跳转后的页面路径如果是相对路径的话会出现css、js以及图片等无法加载问题
- JavaScript实现页面滚动图片加载(仿lazyload效果)
- jquery模仿微博向下滚动到页面底部时实时加载新内容
- jQuery实现页面滚动图片等元素动态加载(按需加载的实例)
- 当滚动条滚动到页面底部自动加载增加内容的js代码
- 关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)
- C#:用WebBrowser获取JS动态加载以后的页面代码并保存图片
- IIS发布网站之后,页面图片和js未加载出错
- js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
- 一段实现页面上的图片延时加载的js