From 2404c08aed5ee5c6f9953a53021234c691fe1b1f Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Tue, 21 Feb 2012 14:56:13 -0800 Subject: [PATCH 01/10] JSLint: re-declared vars, missing semicolons, compare with ===/!== instead of ==/!= --- jquery.lazyload.js | 52 ++++++++++++++++++++++++++++------------------ 1 file changed, 32 insertions(+), 20 deletions(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index 126471a6..fd77ff99 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -45,12 +45,12 @@ /* Fire one scroll event per scroll. Not one scroll event per image. */ var elements = this; - if (0 == settings.event.indexOf("scroll")) { + if (0 === settings.event.indexOf("scroll")) { $(settings.container).bind(settings.event, function(event) { var counter = 0; elements.each(function() { $this = $(this); - if (settings.skip_invisible && !$this.is(":visible")) return; + if (settings.skip_invisible && !$this.is(":visible")) {return;} if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { /* Nothing. */ @@ -99,12 +99,12 @@ } }) .attr("src", $self.data(settings.data_attribute)); - }; + } }); /* When wanted event is triggered load original image */ /* by triggering appear. */ - if (0 != settings.event.indexOf("scroll")) { + if (0 !== settings.event.indexOf("scroll")) { $self.bind(settings.event, function(event) { if (!self.loaded) { $self.trigger("appear"); @@ -129,38 +129,50 @@ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ $.belowthefold = function(element, settings) { + var fold; + if (settings.container === undefined || settings.container === window) { - var fold = $window.height() + $window.scrollTop(); + fold = $window.height() + $window.scrollTop(); } else { - var fold = $(settings.container).offset().top + $(settings.container).height(); + fold = $(settings.container).offset().top + $(settings.container).height(); } + return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { + var fold; + if (settings.container === undefined || settings.container === window) { - var fold = $window.width() + $window.scrollLeft(); + fold = $window.width() + $window.scrollLeft(); } else { - var fold = $(settings.container).offset().left + $(settings.container).width(); + fold = $(settings.container).offset().left + $(settings.container).width(); } + return fold <= $(element).offset().left - settings.threshold; }; $.abovethetop = function(element, settings) { + var fold; + if (settings.container === undefined || settings.container === window) { - var fold = $window.scrollTop(); + fold = $window.scrollTop(); } else { - var fold = $(settings.container).offset().top; + fold = $(settings.container).offset().top; } + return fold >= $(element).offset().top + settings.threshold + $(element).height(); }; $.leftofbegin = function(element, settings) { + var fold; + if (settings.container === undefined || settings.container === window) { - var fold = $window.scrollLeft(); + fold = $window.scrollLeft(); } else { - var fold = $(settings.container).offset().left; + fold = $(settings.container).offset().left; } + return fold >= $(element).offset().left + settings.threshold + $(element).width(); }; @@ -173,15 +185,15 @@ /* Use as $("img:below-the-fold").something() */ $.extend($.expr[':'], { - "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0, container: window}) }, - "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0, container: window}) }, - "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0, container: window}) }, - "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0, container: window}) }, - "in-viewport" : function(a) { return !$.inviewport(a, {threshold : 0, container: window}) }, + "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0, container: window}); }, + "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0, container: window}); }, + "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0, container: window}); }, + "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0, container: window}); }, + "in-viewport" : function(a) { return !$.inviewport(a, {threshold : 0, container: window}); }, /* Maintain BC for couple of versions. */ - "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0, container: window}) }, - "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0, container: window}) }, - "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0, container: window}) } + "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0, container: window}); }, + "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0, container: window}); }, + "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0, container: window}); } }); })(jQuery, window); From 6f8414de9321b9437ad028206ed7035e5620ac07 Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Tue, 21 Feb 2012 14:57:31 -0800 Subject: [PATCH 02/10] Whitespace cleanup --- jquery.lazyload.js | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index fd77ff99..f644124b 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -13,9 +13,9 @@ * */ (function($, window) { - + $window = $(window); - + $.fn.lazyload = function(options) { var settings = { threshold : 0, @@ -28,7 +28,7 @@ appear : null, load : null }; - + if(options) { /* Maintain BC for a couple of version. */ if (undefined !== options.failurelimit) { @@ -69,9 +69,9 @@ this.each(function() { var self = this; var $self = $(self); - + self.loaded = false; - + /* When appear is triggered load original image. */ $self.one("appear", function() { if (!this.loaded) { @@ -86,13 +86,13 @@ .attr("src", $self.data(settings.data_attribute)) [settings.effect](settings.effect_speed); self.loaded = true; - + /* Remove image from array so it is not looped next time. */ var temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); - + if (settings.load) { var elements_left = elements.length; settings.load.call(self, elements_left, settings); @@ -112,17 +112,16 @@ }); } }); - + /* Check if something appears when window is resized. */ $window.bind("resize", function(event) { $(settings.container).trigger(settings.event); }); - + /* Force initial check if images should appear. */ $(settings.container).trigger(settings.event); - - return this; + return this; }; /* Convenience methods in jQuery namespace. */ @@ -195,5 +194,5 @@ "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0, container: window}); }, "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0, container: window}); } }); - + })(jQuery, window); From 97d5e8652cfc1142e6e4daaae37ccbca40076bce Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Tue, 21 Feb 2012 15:14:13 -0800 Subject: [PATCH 03/10] Hoist 'elements' declaration; Add missing 'var' declaration for '' --- jquery.lazyload.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index f644124b..b8578d4c 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -17,6 +17,7 @@ $window = $(window); $.fn.lazyload = function(options) { + var elements; var settings = { threshold : 0, failure_limit : 0, @@ -39,17 +40,17 @@ options.effect_speed = options.effectspeed; delete options.effectspeed; } - + $.extend(settings, options); } /* Fire one scroll event per scroll. Not one scroll event per image. */ - var elements = this; + elements = this; if (0 === settings.event.indexOf("scroll")) { $(settings.container).bind(settings.event, function(event) { var counter = 0; elements.each(function() { - $this = $(this); + var $this = $(this); if (settings.skip_invisible && !$this.is(":visible")) {return;} if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) { @@ -65,7 +66,7 @@ }); }); } - + this.each(function() { var self = this; var $self = $(self); From 113d16ea870ac4ce6dbcd7bf05f6b8855887cb75 Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Tue, 21 Feb 2012 15:42:59 -0800 Subject: [PATCH 04/10] Move image checking to its own function and call that rather than trigger events on elements not owned by the plugin; Fixes #18 since window.onscroll is never called by the plugin anymore --- jquery.lazyload.js | 44 ++++++++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index b8578d4c..0ccdd013 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -17,7 +17,7 @@ $window = $(window); $.fn.lazyload = function(options) { - var elements; + var elements = this; var settings = { threshold : 0, failure_limit : 0, @@ -30,6 +30,25 @@ load : null }; + var checkImages = function() { + var counter = 0; + elements.each(function() { + var $this = $(this); + if (settings.skip_invisible && !$this.is(":visible")) {return;} + if ($.abovethetop(this, settings) || + $.leftofbegin(this, settings)) { + /* Nothing. */ + } else if (!$.belowthefold(this, settings) && + !$.rightoffold(this, settings)) { + $this.trigger("appear"); + } else { + if (++counter > settings.failure_limit) { + return false; + } + } + }); + }; + if(options) { /* Maintain BC for a couple of version. */ if (undefined !== options.failurelimit) { @@ -44,26 +63,11 @@ $.extend(settings, options); } + /* Fire one scroll event per scroll. Not one scroll event per image. */ - elements = this; if (0 === settings.event.indexOf("scroll")) { $(settings.container).bind(settings.event, function(event) { - var counter = 0; - elements.each(function() { - var $this = $(this); - if (settings.skip_invisible && !$this.is(":visible")) {return;} - if ($.abovethetop(this, settings) || - $.leftofbegin(this, settings)) { - /* Nothing. */ - } else if (!$.belowthefold(this, settings) && - !$.rightoffold(this, settings)) { - $this.trigger("appear"); - } else { - if (++counter > settings.failure_limit) { - return false; - } - } - }); + checkImages(); }); } @@ -116,11 +120,11 @@ /* Check if something appears when window is resized. */ $window.bind("resize", function(event) { - $(settings.container).trigger(settings.event); + checkImages(); }); /* Force initial check if images should appear. */ - $(settings.container).trigger(settings.event); + checkImages(); return this; }; From de075545785523569aabbc25a66e854443af13ce Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Tue, 21 Feb 2012 15:45:21 -0800 Subject: [PATCH 05/10] Return the value of checkImages to let failure limit return false --- jquery.lazyload.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index 0ccdd013..4d6637f0 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -67,7 +67,7 @@ /* Fire one scroll event per scroll. Not one scroll event per image. */ if (0 === settings.event.indexOf("scroll")) { $(settings.container).bind(settings.event, function(event) { - checkImages(); + return checkImages(); }); } From b6353e15655d466f524a760daec011c8c0417642 Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Tue, 21 Feb 2012 15:57:06 -0800 Subject: [PATCH 06/10] A little less whitespace --- jquery.lazyload.js | 1 - 1 file changed, 1 deletion(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index 4d6637f0..4b8cc93c 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -63,7 +63,6 @@ $.extend(settings, options); } - /* Fire one scroll event per scroll. Not one scroll event per image. */ if (0 === settings.event.indexOf("scroll")) { $(settings.container).bind(settings.event, function(event) { From abedc4e6d6e498b9acd25bd5657601505d71fbeb Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Tue, 21 Feb 2012 16:20:32 -0800 Subject: [PATCH 07/10] Update minified version --- 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 2364d8d9..0d8cf589 100644 --- a/jquery.lazyload.min.js +++ b/jquery.lazyload.min.js @@ -12,4 +12,4 @@ * Version: 1.7.0 * */ -(function(a,b){$window=a(b),a.fn.lazyload=function(c){var d={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null};c&&(undefined!==c.failurelimit&&(c.failure_limit=c.failurelimit,delete c.failurelimit),undefined!==c.effectspeed&&(c.effect_speed=c.effectspeed,delete c.effectspeed),a.extend(d,c));var e=this;return 0==d.event.indexOf("scroll")&&a(d.container).bind(d.event,function(b){var c=0;e.each(function(){$this=a(this);if(d.skip_invisible&&!$this.is(":visible"))return;if(!a.abovethetop(this,d)&&!a.leftofbegin(this,d))if(!a.belowthefold(this,d)&&!a.rightoffold(this,d))$this.trigger("appear");else if(++c>d.failure_limit)return!1})}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(d.appear){var f=e.length;d.appear.call(b,f,d)}a("").bind("load",function(){c.hide().attr("src",c.data(d.data_attribute))[d.effect](d.effect_speed),b.loaded=!0;var f=a.grep(e,function(a){return!a.loaded});e=a(f);if(d.load){var g=e.length;d.load.call(b,g,d)}}).attr("src",c.data(d.data_attribute))}}),0!=d.event.indexOf("scroll")&&c.bind(d.event,function(a){b.loaded||c.trigger("appear")})}),$window.bind("resize",function(b){a(d.container).trigger(d.event)}),a(d.container).trigger(d.event),this},a.belowthefold=function(c,d){if(d.container===undefined||d.container===b)var e=$window.height()+$window.scrollTop();else var e=a(d.container).offset().top+a(d.container).height();return e<=a(c).offset().top-d.threshold},a.rightoffold=function(c,d){if(d.container===undefined||d.container===b)var e=$window.width()+$window.scrollLeft();else var e=a(d.container).offset().left+a(d.container).width();return e<=a(c).offset().left-d.threshold},a.abovethetop=function(c,d){if(d.container===undefined||d.container===b)var e=$window.scrollTop();else var e=a(d.container).offset().top;return e>=a(c).offset().top+d.threshold+a(c).height()},a.leftofbegin=function(c,d){if(d.container===undefined||d.container===b)var e=$window.scrollLeft();else var e=a(d.container).offset().left;return e>=a(c).offset().left+d.threshold+a(c).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(c){return a.belowthefold(c,{threshold:0,container:b})},"above-the-top":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-screen":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-screen":function(c){return!a.rightoffold(c,{threshold:0,container:b})},"in-viewport":function(c){return!a.inviewport(c,{threshold:0,container:b})},"above-the-fold":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-fold":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-fold":function(c){return!a.rightoffold(c,{threshold:0,container:b})}})})(jQuery,window) +(function(a,b){$window=a(b),a.fn.lazyload=function(c){var d=this,e={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null},f=function(){var b=0;d.each(function(){var c=a(this);if(!e.skip_invisible||!!c.is(":visible"))if(!a.abovethetop(this,e)&&!a.leftofbegin(this,e))if(!a.belowthefold(this,e)&&!a.rightoffold(this,e))c.trigger("appear");else if(++b>e.failure_limit)return!1})};c&&(undefined!==c.failurelimit&&(c.failure_limit=c.failurelimit,delete c.failurelimit),undefined!==c.effectspeed&&(c.effect_speed=c.effectspeed,delete c.effectspeed),a.extend(e,c)),0===e.event.indexOf("scroll")&&a(e.container).bind(e.event,function(a){return f()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(e.appear){var f=d.length;e.appear.call(b,f,e)}a("").bind("load",function(){c.hide().attr("src",c.data(e.data_attribute))[e.effect](e.effect_speed),b.loaded=!0;var f=a.grep(d,function(a){return!a.loaded});d=a(f);if(e.load){var g=d.length;e.load.call(b,g,e)}}).attr("src",c.data(e.data_attribute))}}),0!==e.event.indexOf("scroll")&&c.bind(e.event,function(a){b.loaded||c.trigger("appear")})}),$window.bind("resize",function(a){f()}),f();return this},a.belowthefold=function(c,d){var e;d.container===undefined||d.container===b?e=$window.height()+$window.scrollTop():e=a(d.container).offset().top+a(d.container).height();return e<=a(c).offset().top-d.threshold},a.rightoffold=function(c,d){var e;d.container===undefined||d.container===b?e=$window.width()+$window.scrollLeft():e=a(d.container).offset().left+a(d.container).width();return e<=a(c).offset().left-d.threshold},a.abovethetop=function(c,d){var e;d.container===undefined||d.container===b?e=$window.scrollTop():e=a(d.container).offset().top;return e>=a(c).offset().top+d.threshold+a(c).height()},a.leftofbegin=function(c,d){var e;d.container===undefined||d.container===b?e=$window.scrollLeft():e=a(d.container).offset().left;return e>=a(c).offset().left+d.threshold+a(c).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(c){return a.belowthefold(c,{threshold:0,container:b})},"above-the-top":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-screen":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-screen":function(c){return!a.rightoffold(c,{threshold:0,container:b})},"in-viewport":function(c){return!a.inviewport(c,{threshold:0,container:b})},"above-the-fold":function(c){return!a.belowthefold(c,{threshold:0,container:b})},"right-of-fold":function(c){return a.rightoffold(c,{threshold:0,container:b})},"left-of-fold":function(c){return!a.rightoffold(c,{threshold:0,container:b})}})})(jQuery,window) \ No newline at end of file From 3c498c6e2765b3630d3c13c5216b1215908140db Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Tue, 21 Feb 2012 19:04:12 -0800 Subject: [PATCH 08/10] Listen to window.scroll when the original container is not the window, fixes alternate containers that are not in the viewport --- jquery.lazyload.js | 58 +++++++++++++++++++++++++++++++++++----------- 1 file changed, 44 insertions(+), 14 deletions(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index 4b8cc93c..07962516 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -18,6 +18,7 @@ $.fn.lazyload = function(options) { var elements = this; + var alternate_container = false; var settings = { threshold : 0, failure_limit : 0, @@ -30,16 +31,32 @@ load : null }; - var checkImages = function() { + var checkImages = function(check_window) { var counter = 0; + var window_settings = { + container: window, + threshold: 0 + }; + elements.each(function() { var $this = $(this); if (settings.skip_invisible && !$this.is(":visible")) {return;} - if ($.abovethetop(this, settings) || - $.leftofbegin(this, settings)) { + + if ($this.loaded || + $.abovethetop(this, settings) || + $.leftofbegin(this, settings) || + (check_window && ( + $.abovethetop(this, window_settings) || + $.leftofbegin(this, window_settings) + ))) { /* Nothing. */ - } else if (!$.belowthefold(this, settings) && - !$.rightoffold(this, settings)) { + } else if (!( + $.belowthefold(this, settings) || + $.rightoffold(this, settings) || + (check_window && ( + $.belowthefold(this, window_settings) || + $.rightoffold(this, window_settings) + )))) { $this.trigger("appear"); } else { if (++counter > settings.failure_limit) { @@ -49,7 +66,7 @@ }); }; - if(options) { + if (options) { /* Maintain BC for a couple of version. */ if (undefined !== options.failurelimit) { options.failure_limit = options.failurelimit; @@ -60,14 +77,24 @@ delete options.effectspeed; } + if (options.container && options.container !== window) { + alternate_container = true; + } + $.extend(settings, options); } /* Fire one scroll event per scroll. Not one scroll event per image. */ if (0 === settings.event.indexOf("scroll")) { $(settings.container).bind(settings.event, function(event) { - return checkImages(); + return checkImages(alternate_container); }); + + if (alternate_container) { + $(window).bind(settings.event, function(event) { + return checkImages(alternate_container); + }); + } } this.each(function() { @@ -78,27 +105,30 @@ /* When appear is triggered load original image. */ $self.one("appear", function() { + var elements_left; + if (!this.loaded) { if (settings.appear) { - var elements_left = elements.length; + elements_left = elements.length; settings.appear.call(self, elements_left, settings); } $("") .bind("load", function() { - $self - .hide() + var elements_left, temp; + + $self.hide() .attr("src", $self.data(settings.data_attribute)) [settings.effect](settings.effect_speed); self.loaded = true; /* Remove image from array so it is not looped next time. */ - var temp = $.grep(elements, function(element) { + temp = $.grep(elements, function(element) { return !element.loaded; }); elements = $(temp); if (settings.load) { - var elements_left = elements.length; + elements_left = elements.length; settings.load.call(self, elements_left, settings); } }) @@ -119,11 +149,11 @@ /* Check if something appears when window is resized. */ $window.bind("resize", function(event) { - checkImages(); + checkImages(alternate_container); }); /* Force initial check if images should appear. */ - checkImages(); + checkImages(alternate_container); return this; }; From 2fe901c155e10661a4c8ce7c098fc57ce21e3ce9 Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Tue, 21 Feb 2012 20:19:12 -0800 Subject: [PATCH 09/10] Keep references to jQuery objects to save a few object creations in commonly-called functions --- jquery.lazyload.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/jquery.lazyload.js b/jquery.lazyload.js index 07962516..29d747de 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -162,24 +162,26 @@ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ $.belowthefold = function(element, settings) { - var fold; + var $container, fold; if (settings.container === undefined || settings.container === window) { fold = $window.height() + $window.scrollTop(); } else { - fold = $(settings.container).offset().top + $(settings.container).height(); + $container = $(settings.container); + fold = $container.offset().top + $container.height(); } return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { - var fold; + var $container, fold; if (settings.container === undefined || settings.container === window) { fold = $window.width() + $window.scrollLeft(); } else { - fold = $(settings.container).offset().left + $(settings.container).width(); + $container = $(settings.container); + fold = $container.offset().left + $container.width(); } return fold <= $(element).offset().left - settings.threshold; @@ -187,6 +189,7 @@ $.abovethetop = function(element, settings) { var fold; + var $element = $(element); if (settings.container === undefined || settings.container === window) { fold = $window.scrollTop(); @@ -194,11 +197,12 @@ fold = $(settings.container).offset().top; } - return fold >= $(element).offset().top + settings.threshold + $(element).height(); + return fold >= $element.offset().top + settings.threshold + $element.height(); }; $.leftofbegin = function(element, settings) { var fold; + var $element = $(element); if (settings.container === undefined || settings.container === window) { fold = $window.scrollLeft(); @@ -206,7 +210,7 @@ fold = $(settings.container).offset().left; } - return fold >= $(element).offset().left + settings.threshold + $(element).width(); + return fold >= $element.offset().left + settings.threshold + $element.width(); }; $.inviewport = function(element, settings) { From be77a4a16100112c731edbad160e554911820fcc Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Wed, 22 Feb 2012 00:05:02 -0800 Subject: [PATCH 10/10] Example of a scrolling container below the fold of the window --- enabled_container_belowthefold.html | 87 +++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 enabled_container_belowthefold.html diff --git a/enabled_container_belowthefold.html b/enabled_container_belowthefold.html new file mode 100644 index 00000000..e65d90df --- /dev/null +++ b/enabled_container_belowthefold.html @@ -0,0 +1,87 @@ + + + + + + Lazy Load Enabled on Container + + + + + + +
+ +
+ +

Plugin enabled on container

+
+ +

+ Images below the visible area (the ones lower than container bottom) are not loaded. When scrolling down + they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page where plugin is + disabled or same page with fadein effect. +

+ + + 
+ $("img").lazyload({
+     effect : "fadeIn",
+     container: $("#container")
+ });
+ + +
+ BMW M1 Hood
+ BMW M1 Side
+ Viper 1
+ Viper Corner
+ BMW M3 GT
+ Corvette Pitstop
+
+ +
+ + + + + + + + + + +