project/static/js/jquery.lazyload.js

   1 /*
   2  * Lazy Load - jQuery plugin for lazy loading images
   3  *
   4  * Copyright (c) 2007-2009 Mika Tuupola
   5  *
   6  * Licensed under the MIT license:
   7  *   http://www.opensource.org/licenses/mit-license.php
   8  *
   9  * Project home:
  10  *   http://www.appelsiini.net/projects/lazyload
  11  *
  12  * Version:  1.3.2
  13  *
  14  */
  15 (function($) {
  16
  17     $.fn.lazyload = function(options) {
  18         var settings = {
  19             threshold    : 0,
  20             failurelimit : 0,
  21             event        : "scroll",
  22             effect       : "show",
  23             container    : window
  24         };
  25
  26         if(options) {
  27             $.extend(settings, options);
  28         }
  29
  30         /* Fire one scroll event per scroll. Not one scroll event per image. */
  31         var elements = this;
  32         if ("scroll" == settings.event) {
  33             $(settings.container).bind("scroll", function(event) {
  34                 var counter = 0;
  35                 elements.each(function() {
  36                     if (!$.belowthefold(this, settings) &&
  37                         !$.rightoffold(this, settings)) {
  38                             $(this).trigger("appear");
  39                     } else {
  40                         if (counter++ > settings.failurelimit) {
  41                             return false;
  42                         }
  43                     }
  44                 });
  45                 /* Remove image from array so it is not looped next time. */
  46                 var temp = $.grep(elements, function(element) {
  47                     return !element.loaded;
  48                 });
  49                 elements = $(temp);
  50             });
  51         }
  52
  53         return this.each(function() {
  54             var self = this;
  55             /* TODO: use .data() instead of .attr() */
  56             $(self).attr("original", $(self).attr("src"));
  57             if ("scroll" != settings.event
  58                          || $.belowthefold(self, settings)
  59                          || $.rightoffold(self, settings)) {
  60                 if (settings.placeholder) {
  61                     $(self).attr("src", settings.placeholder);
  62                 } else {
  63                     $(self).removeAttr("src");
  64                 }
  65                 self.loaded = false;
  66             } else {
  67                 self.loaded = true;
  68             }
  69
  70             /* When appear is triggered load original image. */
  71             $(self).one("appear", function() {
  72                 if (!this.loaded) {
  73                     $("<img />")
  74                         .bind("load", function() {
  75                             $(self)
  76                                 .hide()
  77                                 .attr("src", $(self).attr("original"))
  78                                 [settings.effect](settings.effectspeed);
  79                             self.loaded = true;
  80                         })
  81                         .attr("src", $(self).attr("original"));
  82                 };
  83             });
  84
  85             /* When wanted event is triggered load original image */
  86             /* by triggering appear.                              */
  87             if ("scroll" != settings.event) {
  88                 $(self).bind(settings.event, function(event) {
  89                     if (!self.loaded) {
  90                         $(self).trigger("appear");
  91                     }
  92                 });
  93             }
  94         });
  95
  96     };
  97
  98     /* Convenience methods in jQuery namespace.           */
  99     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
 100
 101     $.belowthefold = function(element, settings) {
 102         if (settings.container === undefined || settings.container === window) {
 103             var fold = $(window).height() + $(window).scrollTop();
 104         }
 105         else {
 106             var fold = $(settings.container).offset().top + $(settings.container).height();
 107         }
 108         return fold <= $(element).offset().top - settings.threshold;
 109     };
 110
 111     $.rightoffold = function(element, settings) {
 112         if (settings.container === undefined || settings.container === window) {
 113             var fold = $(window).width() + $(window).scrollLeft();
 114         }
 115         else {
 116             var fold = $(settings.container).offset().left + $(settings.container).width();
 117         }
 118         return fold <= $(element).offset().left - settings.threshold;
 119     };
 120
 121     $.aboveViewport = function(element, settings) {
 122         if (settings.container === undefined || settings.container === window) {
 123             var top = $(window).scrollTop();
 124         }
 125         else {
 126             var top = $(settings.container).offset().top;
 127         }
 128         return top >= $(element).offset().bottom - settings.threshold;
 129     };
 130
 131     /* Custom selectors for your convenience.   */
 132     /* Use as $("img:below-the-fold").something() */
 133
 134     $.extend($.expr[':'], {
 135         "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
 136         "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
 137         "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
 138         "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
 139     });
 140
 141 })(jQuery);