首页 > 代码库 > 设计模式（节流模式-----图片懒加载）
设计模式（节流模式-----图片懒加载）
昨天把节流模式写了下，今天来个节流模式的应用----图片懒加载（图片延迟加载）
废话不多说，直接懒加载代码吧！哈哈
1 //创建懒加载对象 @id是将要获取外部容器的id
var Lazyload = function(id) { 2 this.container = document.getElementById(id); 3 this.imgs = this.getImgs(); 4 this.init();//初始化 5 } 6 Lazyload.prototype = { 7 //初始化 8 init: function() { 9 this.update(); //进行首次图片位置判断10 this.bindEvent(); //添加事件11 },12 //获取图片数据13 getImgs: function() { //获取到的图片对象放入数组中14 var arr = [];15 var imgs = this.container.getElementsByTagName(‘img‘);16 for(var i = 0, len = imgs.length; i < len; i++) {17 arr.push(imgs[i]);18 }19 return arr;20 },21 //对图片进行处理操作22 update: function() {23 if(!this.imgs.length) return;24 var i = this.imgs.length;25 for(i--; i >= 0; i--) {26 if(this.shouldShow(i)) {27 this.imgs[i].src = http://www.mamicode.com/this.imgs[i].getAttribute("data-src");28 this.imgs.splice(i, 1);//获取后删除数组中的图片29 }30 }31 },32 //判断图片位置33 shouldShow: function(i) {34 var img = this.imgs[i];35 scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动高度36 scrollBottom = scrollTop + document.documentElement.clientHeight; //获取页面底部高度37 imgTop = this.pageY(img);38 imgBottom = imgTop + img.offsetHeight;39 if((imgTop > scrollTop && imgTop < scrollBottom) || (imgBottom > scrollTop && imgBottom < scrollBottom)) {40 41 return true;42 } else {43 return false;44 }45 },46 //获取图片距离页面顶部距离47 pageY: function(ele) {48 if(ele.offsetParent) {49 return ele.offsetTop + this.pageY(ele.offsetParent);50 } else {51 return ele.offsetTop;52 }53 },54 //绑定事件55 bindEvent: function() {56 var that = this;57 that.on(window, "scroll", function() {58 //that.update();59 throttle(that.update, {60 context: that61 })62 });63 that.on(window, function() {64 //that.update();65 throttle(that.update, {66 context: that67 })68 })69 },70 //监听71 on: function(ele, type, fn) {72 if(ele.addEventListener) {73 ele.addEventListener(type, fn, false)74 } else {75 ele.attachEvent("on" + type, fn)76 }77 }78 }
结果展示：
延迟前显示默认图片
延迟结果
完整代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #con div { width: 300px; height: 200px; overflow: hidden; margin: auto; } img { width: 100%; height: 100%; } </style> </head> <body> <div id="con"> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1209/10/c1/13758581_1347257278695.jpg" /></div> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://pic32.nipic.com/20130814/13162234_111708002000_2.jpg" /></div> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=3704303780,566844591&fm=206&gp=0.jpg" /></div> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://www.bz55.com/uploads/allimg/141202/139-141202103039.jpg" /></div> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1209/10/c1/13758581_1347257278695.jpg" /></div> <div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://pic32.nipic.com/20130814/13162234_111708002000_2.jpg" /></div> </div> <div style="height: 500px;background: red;position: relative;padding:1px;display: block;"> <div id="a" style="margin-top: 10px;background: yellow; height: 100px;"></div> </div> <script> var extend = function(olds, news) { for(var index in news) { olds[index] = news[index]; } return olds; } var throttle = function() { var isClear = arguments[0], fn; if(typeof isClear === "boolean") { fn = arguments[1]; fn.__throttleID && clearTimeout(fn.__throttleID); } else { fn = isClear; param = arguments[1] || []; var p = extend({ context: null, args: [], time: 300 }, param); arguments.callee(true, fn); fn.__throttleID = setTimeout(function() { fn.apply(p.context, p.args) }, p.time) } } var Lazyload = function(id) { this.container = document.getElementById(id); this.imgs = this.getImgs(); this.init(); } Lazyload.prototype = { //初始化 init: function() { this.update(); //进行首次图片位置判断 this.bindEvent(); //添加事件 }, //获取图片数据 getImgs: function() { var arr = []; var imgs = this.container.getElementsByTagName(‘img‘); for(var i = 0, len = imgs.length; i < len; i++) { arr.push(imgs[i]); } return arr; }, //对图片进行处理操作 update: function() { if(!this.imgs.length) return; var i = this.imgs.length; for(i--; i >= 0; i--) { if(this.shouldShow(i)) { this.imgs[i].src = http://www.mamicode.com/this.imgs[i].getAttribute("data-src"); this.imgs.splice(i, 1); } } }, //判断图片位置 shouldShow: function(i) { var img = this.imgs[i]; scrollTop = document.documentElement.scrollTop || document.body.scrollTop; scrollBottom = scrollTop + document.documentElement.clientHeight; imgTop = this.pageY(img); imgBottom = imgTop + img.offsetHeight; if((imgTop > scrollTop && imgTop < scrollBottom) || (imgBottom > scrollTop && imgBottom < scrollBottom)) { return true; } else { return false; } }, //获取图片距离页面顶部距离 pageY: function(ele) { if(ele.offsetParent) { return ele.offsetTop + this.pageY(ele.offsetParent); } else { return ele.offsetTop; } }, //绑定事件 bindEvent: function() { var that = this; that.on(window, "scroll", function() { //that.update(); throttle(that.update, { context: that }) }); that.on(window, function() { //that.update(); throttle(that.update, { context: that }) }) }, //监听 on: function(ele, type, fn) { if(ele.addEventListener) { ele.addEventListener(type, fn, false) } else { ele.attachEvent("on" + type, fn) } } } window.onload = function() { new Lazyload("con") } </script> </body></html>
设计模式（节流模式-----图片懒加载）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。