From e982d4950e46ebafd880d4e4e0b3730670197085 Mon Sep 17 00:00:00 2001 From: joshgagnon Date: Tue, 21 Oct 2014 11:00:35 +1300 Subject: [PATCH 1/3] Added destroy method and clean up --- jquery.lazyload.js | 135 +++++++++++++++++++++++++++++---------------- 1 file changed, 87 insertions(+), 48 deletions(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index 5a22d8ea..265a4764 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -13,24 +13,33 @@ * */ -(function($, window, document, undefined) { +(function($, window){ var $window = $(window); - $.fn.lazyload = function(options) { - var elements = this; - var $container; - var settings = { - threshold : 0, - failure_limit : 0, - event : "scroll", - effect : "show", - container : window, - data_attribute : "original", - skip_invisible : true, - appear : null, - load : null, - placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" - }; + + var plugin_name = 'lazyload'; + var percentage; + var methods = { + init: function(options) { + options = options || {}; + var self = this; + if(!this.length){ + return; + } + var elements = this; + var $container; + var settings = { + threshold : 0, + failure_limit : 0, + event : "scroll", + effect : "show", + container : window, + data_attribute : "original", + skip_invisible : true, + appear : null, + load : null, + placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" + }; function update() { var counter = 0; @@ -42,11 +51,11 @@ } if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { - /* Nothing. */ + // Nothing. } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) { $this.trigger("appear"); - /* if we found an image we'll load, reset the counter */ + // if we found an image we'll load, reset the counter counter = 0; } else { if (++counter > settings.failure_limit) { @@ -77,11 +86,11 @@ /* Fire one scroll event per scroll. Not one scroll event per image. */ if (0 === settings.event.indexOf("scroll")) { - $container.bind(settings.event, function() { + $container.on(settings.event + '.lazyload', function() { return update(); }); } - + var images = []; this.each(function() { var self = this; var $self = $(self); @@ -102,8 +111,8 @@ var elements_left = elements.length; settings.appear.call(self, elements_left, settings); } - $("") - .bind("load", function() { + images.push($("") + .one("load", function() { var original = $self.attr("data-" + settings.data_attribute); $self.hide(); @@ -127,7 +136,7 @@ settings.load.call(self, elements_left, settings); } }) - .attr("src", $self.attr("data-" + settings.data_attribute)); + .attr("src", $self.attr("data-" + settings.data_attribute))); } }); @@ -139,33 +148,63 @@ $self.trigger("appear"); } }); - } - }); - - /* Check if something appears when window is resized. */ - $window.bind("resize", function() { - update(); - }); - - /* With IOS5 force loading images when navigating with back button. */ - /* Non optimal workaround. */ - if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { - $window.bind("pageshow", function(event) { - if (event.originalEvent && event.originalEvent.persisted) { - elements.each(function() { - $(this).trigger("appear"); - }); - } + } + + }); + $window.on("resize.lazyload",update); + // With IOS5 force loading images when navigating with back button. + // Non optimal workaround. + var apple_hack = function(event) { + if (event.originalEvent && event.originalEvent.persisted) { + elements.each(function() { + $(this).trigger("appear"); + }); + } + }; + if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { + $window.on("pageshow.lazyload", apple_hack); + } + + update(); + + $(this).data(plugin_name, { + destroy: function(){ + $window.off("resize.lazyload", update); + $window.off("pageshow.lazyload", apple_hack); + $container.off(settings.event + '.lazyload'); + $container = null; + elements.each(function(){ + $(this).off('appear'); + }); + elements = null; + $(images).each(function(){ + $(this).off(); + }); + images = []; + } }); - } - /* Force initial check if images should appear. */ - $(document).ready(function() { - update(); - }); - - return this; - }; + }, + destroy: function() { + var $this = $(this), + data = $this.data(plugin_name); + if (data) { + data.destroy(); + $this.removeData(plugin_name); + } + } + }; + + $.fn[plugin_name] = function(method) { + // Method calling logic + if (methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method) { + return methods.init.apply(this, arguments); + } else { + $.error('Method ' + method + ' does not exist'); + } + }; /* Convenience methods in jQuery namespace. */ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ From 95bdfb6d88df37de0d8f25f29164fdda227ba37b Mon Sep 17 00:00:00 2001 From: joshgagnon Date: Tue, 21 Oct 2014 11:04:23 +1300 Subject: [PATCH 2/3] Update jquery.lazyload.min.js --- jquery.lazyload.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.lazyload.min.js b/jquery.lazyload.min.js index 615b90e5..612ab409 100644 --- a/jquery.lazyload.min.js +++ b/jquery.lazyload.min.js @@ -1,2 +1,2 @@ /*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */ -!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document); \ No newline at end of file +!function(a,b){var c=a(b),d="lazyload",f={init:function(e){function j(){var b=0;g.each(function(){var c=a(this);if(!i.skip_invisible||c.is(":visible"))if(a.abovethetop(this,i)||a.leftofbegin(this,i));else if(a.belowthefold(this,i)||a.rightoffold(this,i)){if(++b>i.failure_limit)return!1}else c.trigger("appear"),b=0})}if(e=e||{},this.length){var h,g=this,i={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};e&&(void 0!==e.failurelimit&&(e.failure_limit=e.failurelimit,delete e.failurelimit),void 0!==e.effectspeed&&(e.effect_speed=e.effectspeed,delete e.effectspeed),a.extend(i,e)),h=void 0===i.container||i.container===b?c:a(i.container),0===i.event.indexOf("scroll")&&h.on(i.event+".lazyload",function(){return j()});var k=[];this.each(function(){var b=this,c=a(b);b.loaded=!1,(void 0===c.attr("src")||c.attr("src")===!1)&&c.is("img")&&c.attr("src",i.placeholder),c.one("appear",function(){if(!this.loaded){if(i.appear){var d=g.length;i.appear.call(b,d,i)}k.push(a("").one("load",function(){var d=c.attr("data-"+i.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[i.effect](i.effect_speed),b.loaded=!0;var e=a.grep(g,function(a){return!a.loaded});if(g=a(e),i.load){var f=g.length;i.load.call(b,f,i)}}).attr("src",c.attr("data-"+i.data_attribute)))}}),0!==i.event.indexOf("scroll")&&c.bind(i.event,function(){b.loaded||c.trigger("appear")})}),c.on("resize.lazyload",j);var l=function(b){b.originalEvent&&b.originalEvent.persisted&&g.each(function(){a(this).trigger("appear")})};/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&c.on("pageshow.lazyload",l),j(),a(this).data(d,{destroy:function(){c.off("resize.lazyload",j),c.off("pageshow.lazyload",l),h.off(i.event+".lazyload"),h=null,g.each(function(){a(this).off("appear")}),g=null,a(k).each(function(){a(this).off()}),k=[]}})}},destroy:function(){var b=a(this),c=b.data(d);c&&(c.destroy(),b.removeData(d))}};a.fn[d]=function(b){return f[b]?f[b].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof b&&b?(a.error("Method "+b+" does not exist"),void 0):f.init.apply(this,arguments)},a.belowthefold=function(d,e){var f;return f=void 0===e.container||e.container===b?(b.innerHeight?b.innerHeight:c.height())+c.scrollTop():a(e.container).offset().top+a(e.container).height(),f<=a(d).offset().top-e.threshold},a.rightoffold=function(d,e){var f;return f=void 0===e.container||e.container===b?c.width()+c.scrollLeft():a(e.container).offset().left+a(e.container).width(),f<=a(d).offset().left-e.threshold},a.abovethetop=function(d,e){var f;return f=void 0===e.container||e.container===b?c.scrollTop():a(e.container).offset().top,f>=a(d).offset().top+e.threshold+a(d).height()},a.leftofbegin=function(d,e){var f;return f=void 0===e.container||e.container===b?c.scrollLeft():a(e.container).offset().left,f>=a(d).offset().left+e.threshold+a(d).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window); From a4dc3f79b420793a36c18cdf51f9b00648f74587 Mon Sep 17 00:00:00 2001 From: joshgagnon Date: Tue, 21 Oct 2014 11:08:52 +1300 Subject: [PATCH 3/3] Clean up of formatting --- jquery.lazyload.js | 45 +++++++++++++++++++++------------------------ 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index 265a4764..2d67609a 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -16,10 +16,8 @@ (function($, window){ var $window = $(window); - - var plugin_name = 'lazyload'; - var percentage; - var methods = { + var plugin_name = 'lazyload'; + var methods = { init: function(options) { options = options || {}; var self = this; @@ -150,25 +148,25 @@ }); } - }); - $window.on("resize.lazyload",update); - // With IOS5 force loading images when navigating with back button. - // Non optimal workaround. - var apple_hack = function(event) { - if (event.originalEvent && event.originalEvent.persisted) { - elements.each(function() { - $(this).trigger("appear"); - }); - } - }; - if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { - $window.on("pageshow.lazyload", apple_hack); - } + }); + $window.on("resize.lazyload",update); + // With IOS5 force loading images when navigating with back button. + // Non optimal workaround. + var apple_hack = function(event) { + if (event.originalEvent && event.originalEvent.persisted) { + elements.each(function() { + $(this).trigger("appear"); + }); + } + }; + if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) { + $window.on("pageshow.lazyload", apple_hack); + } - update(); + update(); - $(this).data(plugin_name, { - destroy: function(){ + $(this).data(plugin_name, { + destroy: function(){ $window.off("resize.lazyload", update); $window.off("pageshow.lazyload", apple_hack); $container.off(settings.event + '.lazyload'); @@ -183,7 +181,6 @@ images = []; } }); - }, destroy: function() { var $this = $(this), @@ -195,7 +192,7 @@ } }; - $.fn[plugin_name] = function(method) { + $.fn[plugin_name] = function(method) { // Method calling logic if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); @@ -204,7 +201,7 @@ } else { $.error('Method ' + method + ' does not exist'); } - }; + }; /* Convenience methods in jQuery namespace. */ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */