仿迅雷图片的被动加载结果，兼容性不太好

发布时间：2018-08-19 08:54:14 所属栏目：编程来源：站长网

导读：Java script实现的页面图片被动加载类，在行使前用1像素图像举办占位，并给img tag 添加自界说bigsrc属性，当有图片进入可视地区内时，载入图片，进步页面载入速率，节减不须要的流量和毗连数，x轴转动加载成果未被实现。主函数获取其他剧本注册到window

　　Javascript实现的页面图片被动加载类，在行使前用1像素图像举办占位，并给img tag 添加自界说bigsrc属性，当有图片进入可视地区内时，载入图片，进步页面载入速率，节减不须要的流量和毗连数，x轴转动加载成果未被实现。主函数获取其他剧本注册到window上的onscroll和onresize变乱，停止斗嘴。

　　本代码在IE6 firefox3.6 Firefox4.0 chrome opera 11.10中测试通过。

　　被动加载的意义：

　　当用户拖动转动条，假云云时网页有图片的话开始加载，并不是拖不拖转动条都先把图片加载完。这样做的甜头：

　　1，加速页面载入速率，进步用户体验，首页图片较多的页面尤其明明

　　2，节减流量和处事器毗连数

<!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=gbk" /> <title>图片被动加载的实现</title> </head> <body> <script type="text/javascript"> /** * Javascript Image Delay load * @author Eric,<wangyinglei@yeah.net>,QQ:31301678 * @copyright Quanying Network Inc. 2010 * @TODO x轴转动加载成果未被实现 */ //闭包防备变量斗嘴 (function(){ //预界说变量，减小代码体积 var _ = document, A = _.compatMode, B = _.body, C = _.documentElement; //Constructor function AimoLoad(e){ //要处理赏罚的包括耽误加载图片的容器 this.area = e ? this.get(e) : _; //必要耽误加载的全部图片工具 this.imgs = []; //执行判定前提创立载入图片 this.run(); } //扩展原型链（注册类其他要领） AimoLoad.prototype = { //获取DOM元素，仅支持ID 'get' : function(e){ return typeof(e)=='string' ? _.getElementById(e) : e; }, //获取全部必要被动载入的图片荟萃 'getImages' : function(){ var i = 0, imgs = this.area.getElementsByTagName('img'), l = imgs.length; for ( ; i < l; i++) { //过滤带有bigsrc属性的全部图片 if(imgs[i].getAttribute('bigsrc')){ this.imgs.push(imgs[i]); } } }, //获取元素位置坐标 'getPosition' : function(el){ var x = 0, y = 0;; if (el.getBoundingClientRect) { var box = el.getBoundingClientRect(), el = (A != "CSS1Compat") ? _.body : C; x = box.left + el.scrollLeft - el.clientLeft; y = box.top + el.scrollTop - el.clientTop; } else { x = el.offsetLeft; y = el.offsetTop; var parent = el.offsetParent; while (parent) { x += parent.offsetLeft; y += parent.offsetTop; parent = parent.offsetParent; } } return {'x' : x, 'y' : y}; }, //封装判定变量是否界说 'defined' : function(o){ return (typeof(o)!="undefined"); }, //封装正当化Int变量 'zeroFix' : function(n){ return (!this.defined(n) || isNaN(n))? 0 : n; }, //获取可视部门高度 'getVisibileHeight' : function(){ var cm = C && (!A || A=="CSS1Compat"); if (!window.opera && cm) { return C.clientHeight; }else if (A && !window.opera && B) { return B.clientHeight; } return this.zeroFix(self.innerHeight); }, //获取垂直转动条位置 'getScrollTop' : function(){ if (C && this.defined(C.scrollTop) && C.scrollTop>0) { return C.scrollTop; } if (B && this.defined(B.scrollTop)) { return B.scrollTop; } return 0; }, //执行主函数 'run' : function(){ //获取其他剧本注册到window上的onscroll和onresize变乱，停止斗嘴 var _resize = window.onresize || function(){}, _scroll = window.onscroll || function(){}, //引用自身，另存this指向 _self = this, //界说注册函数 delayLoad = function(){ //清空前一次获取的全部图片 _self.imgs = []; //获取当前未载入的图片 _self.getImages(); //假如已经没有被动载入的图片了，那么开释注册的变乱，进步机能，节减内存 if(_self.imgs.length==0){ window.onscroll = function(){ _scroll(); }; window.onresize = function(){ _resize(); }; //alert('破除变乱'); return; } var i = 0, m = _self.imgs, l = _self.imgs.length, y = _self.getVisibileHeight(), t = _self.getScrollTop(); //遍历全部必要被动载入的图片 for( ; i < l; i++){ //闭包担保i变量 (function(i){ //获取每个图像工具的坐标 var pos = _self.getPosition(m[i]); //假如图片呈此刻可视地区内 if(t + y > pos.y){ //读取bigsrc属性，替代当前src属性 m[i].setAttribute('src', m[i].getAttribute('bigsrc')); //删除bigsrc属性，进步机能 m[i].removeAttribute('bigsrc'); } })(i);//闭包竣事 }//轮回竣事 };//界说注册函数竣事 //注册函数到window scroll变乱 window.onscroll = function(){ _scroll();//执行其他剧本注册到当前变乱的函数 delayLoad(); }; //注册函数到window resize变乱 window.onresize = function(){ _resize();//执行其他剧本注册到当前变乱的函数 delayLoad(); }; } } //袒露接口到外部，以便挪用 window.AimoLoad = AimoLoad; })(); </script> <div id="df" style="margin-top:1000px"> <img src="/uploads/allimg/1105/frame_on.gif" width="200" bigsrc="/uploads/common/images/p5.jpg" /> <div style="height:300px;"></div> <img src="/uploads/allimg/1105/frame_on.gif" width="200" bigsrc="/uploads/common/images/p6.jpg" /> </div> <script type="text/javascript"> new AimoLoad(); </script> </body> </html>s<br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys