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
+
+ +
+ + + + + + + + + + + diff --git a/jquery.lazyload.js b/jquery.lazyload.js index 126471a6..29d747de 100644 --- a/jquery.lazyload.js +++ b/jquery.lazyload.js @@ -13,10 +13,12 @@ * */ (function($, window) { - + $window = $(window); - + $.fn.lazyload = function(options) { + var elements = this; + var alternate_container = false; var settings = { threshold : 0, failure_limit : 0, @@ -28,8 +30,43 @@ appear : null, load : null }; - - if(options) { + + 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 ($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) || + (check_window && ( + $.belowthefold(this, window_settings) || + $.rightoffold(this, window_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) { options.failure_limit = options.failurelimit; @@ -39,72 +76,69 @@ options.effect_speed = options.effectspeed; 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. */ - 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 ($.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; - } - } - }); + return checkImages(alternate_container); }); + + if (alternate_container) { + $(window).bind(settings.event, function(event) { + return checkImages(alternate_container); + }); + } } - + this.each(function() { var self = this; var $self = $(self); - + self.loaded = false; - + /* 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); } }) .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"); @@ -112,56 +146,71 @@ }); } }); - + /* Check if something appears when window is resized. */ $window.bind("resize", function(event) { - $(settings.container).trigger(settings.event); + checkImages(alternate_container); }); - + /* Force initial check if images should appear. */ - $(settings.container).trigger(settings.event); - - return this; + checkImages(alternate_container); + return this; }; /* Convenience methods in jQuery namespace. */ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ $.belowthefold = function(element, settings) { + var $container, 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(); + $container = $(settings.container); + fold = $container.offset().top + $container.height(); } + return fold <= $(element).offset().top - settings.threshold; }; $.rightoffold = function(element, settings) { + var $container, 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(); + $container = $(settings.container); + fold = $container.offset().left + $container.width(); } + return fold <= $(element).offset().left - settings.threshold; }; $.abovethetop = function(element, settings) { + var fold; + var $element = $(element); + 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(); + + 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) { - 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(); + + return fold >= $element.offset().left + settings.threshold + $element.width(); }; $.inviewport = function(element, settings) { @@ -173,15 +222,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); 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