图片加载特效，JS图片loading个性显示效果

发布时间：2018-08-17 00:46:19 所属栏目：Asp教程来源：站长网

导读：图片加载特效，JS图片loading个性显示效果。说的白话一些就是图片在加载的时候不是一下子加载完，而是随着网页滚动条的滚动，即时加载，这样可以节省资源，让网页在初始状态的打开速度非常快，避免了用户等待。这里使用了一个封装的JS类文件，你可以引伸功

　　图片加载特效，JS图片loading个性显示效果。说的白话一些就是图片在加载的时候不是一下子加载完，而是随着网页滚动条的滚动，即时加载，这样可以节省资源，让网页在初始状态的打开速度非常快，避免了用户等待。这里使用了一个封装的JS类文件，你可以引伸功能，再次扩展和完善。javascript图片加载源码分享给各位同仁。

　　演示：

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>JS图片加载技术演示代码</title> <style type="text/css"> img {border:1px solid #ccc; background:#fff url(/uploads/common/images/loading.gif) no-repeat center center;} </style> </head> <body> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s1.jpg?0" /><br /> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s2.jpg?1" /><br /> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s3.jpg?2" /><br /> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s4.jpg?3" /><br /> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s5.jpg?4" /><br /> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s6.jpg?5" /><br /> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s7.jpg?6" /><br /> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s8.jpg?7" /><br /> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s9.jpg?8" /><br /> <img src="/uploads/common/images/blank.gif" width="120" height="120" path="/uploads/common/images/wall_s10.jpg?9" /><br /> <script type="text/javascript"> var ImgLoadManager = (function() { var storedInstance = null; var ImgLoad = function() { this.imgs = document.getElementsByTagName('img'); }; ImgLoad.prototype = { getPageSize: function() { var winH; if(window.innerHeight) { winH = window.innerHeight; } else if(document.documentElement && document.documentElement.clientHeight) { winH = document.documentElement.clientHeight; } else if(document.body) { winH = document.body.clientHeight; }; return {WinH: winH}; }, getPageScroll: function() { var y; if(window.pageYOffset) { y = window.pageYOffset; } else if(document.documentElement && document.documentElement.scrollTop) { y = document.documentElement.scrollTop; } else if(document.body) { y = document.body.scrollTop; }; return {Y: y}; }, getOffsetTop: function(el) { var t = el.offsetTop; while(el = el.offsetParent) { t += el.offsetTop; }; return t; }, addEvent: function(el, type, fn) { if(window.addEventListener) { el.addEventListener(type, fn, false); } else if(window.attachEvent) { el.attachEvent('on' + type, fn); } else { el['on' + type] = fn; }; }, removeEvent: function(el, type, fn) { if(window.removeEventListener) { el.removeEventListener(type, fn, false); } else if(window.detachEvent) { el.detachEvent('on' + type, fn); } else { el['on' + type] = null; }; }, bubbleSort: function(array) { var i = 0, len = array.length, j, d; for(; i < len; i++) { for(j = 0; j < len; j++) { if(array[i] < array[j]) { d = array[j]; array[j] = array[i]; array[i] = d; }; }; }; return array; }, resize: function() { this.pageHeight = this.getPageSize().WinH; }, setOpacity: function(el, val) { var browserName=navigator.userAgent.toLowerCase(); if(/msie/i.test(browserName) && !/opera/.test(browserName)) { el.style.filter = 'alpha(opacity='+ (val * 100) +')'; } else { el.style.opacity = val; }; }, init: function() { this.json = {}; this.sort = []; this.pageHeight = this.getPageSize().WinH; if(this.imgs != null) { for(var i = 0, len = this.imgs.length; i < len; i++) { var img = this.imgs[i]; var oImg = { 'img': img, 'path': img.getAttribute('path'), 'offsetTop': this.getOffsetTop(img) }; img.removeAttribute('path'); this.sort.push(oImg.offsetTop); this.json[oImg.offsetTop] = oImg; }; this.sort = this.bubbleSort(this.sort); }; }, animate: function(el) { var that = this; var opacity = 0.1; setTimeout(function() { opacity += 0.1; that.setOpacity(el, opacity); if(opacity < 1) { setTimeout(arguments.callee, 100); }; }, 100); }, startLoad: function() { var that = this; var img = []; //存储 Image 对象 var aImg = []; // 存储 dom 图片 var num = 0; // 存储已经加载的图片数量 if(this.sort.length !== 0) { for(var i = 0; i < this.sort.length; i++) { if(this.sort[i] < (this.pageHeight + this.getPageScroll().Y)) { num++; img[i] = new Image(); aImg[i] = this.json[this.sort[i]].img; img[i].src = this.json[this.sort[i]].path; if(img[i].complete) { aImg[i].src = img[i].src; } else { img[i].onload = function(key) { return function() { aImg[key].style.background = '#fff'; that.setOpacity(aImg[key], 0.1); aImg[key].src = this.src; that.animate(aImg[key]); } }(i); }; } else { break; }; }; if(num > 0) { for(var i = num; i > 0; i--) { this.sort.splice(i-1, 1); }; num = 0; }; } else { this.removeEvent(window, 'scroll', function() { this.startLoad(); }); this.imgs = null; this.pageWidth = null; this.pageHeight = null; this.json = null; return; }; } }; return { appImgLoad: function() { // 生成实例 var tt = this.getImgLoad(); // 初始化 tt.init(); // 页面加载 1 秒后再加载出现在视图中的图片 tt.addEvent(window, 'load', function() { setTimeout(function() { tt.startLoad(); }, 1000); }); // 拖动滚动条，加载图片 tt.addEvent(window, 'scroll', function() { tt.startLoad(); }); // 当浏览器大小改变时，重新获取浏览器视图尺寸 tt.addEvent(window, 'resize', function() { tt.resize(); }); }, getImgLoad: function() { if(storedInstance == null) { storedInstance = new ImgLoad(); }; return storedInstance; } }; })(); ImgLoadManager.appImgLoad(); </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：海西站长网）

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