project/static/js/jquery.lazyload.js

   1 (function($) {
   2     jQuery.fn.lazyload = function(pattern, options) {
   3         var settings = {
   4             threshold: 0,
   5             scrollThreshold: 300,
   6             placeholder: 'loading...',
   7             checkInterval: 2000
   8         };
   9
  10         if (options) {
  11             $.extend(settings, options);
  12         }
  13
  14         var container = this;
  15         container.data('lazyload:lastCheckedScrollTop', -10000);
  16
  17         function aboveViewport(container, element, threshold) {
  18             return $(container).offset().top >= $(element).offset().top + $(element).height() + threshold;
  19         }
  20
  21         function belowViewport(container, element, threshold) {
  22             return $(container).offset().top + $(container).height() + threshold <= $(element).offset().top;
  23         }
  24
  25         function checkScroll() {
  26             if (container.data('lazyload:lastCheckedScrollTop') == undefined) {
  27                 return;
  28             }
  29             if (Math.abs(container.scrollTop() - container.data('lazyload:lastCheckedScrollTop')) > settings.scrollThreshold) {
  30                 container.data('lazyload:lastCheckedScrollTop', container.scrollTop());
  31
  32                 $(pattern, container).each(function() {
  33                     if (aboveViewport(container, this, settings.threshold)
  34                         || belowViewport(container, this, settings.threshold)) {
  35                         $(this).html(settings.placeholder);
  36                     } else {
  37                         $(this).html('');
  38                         var self = this;
  39                         $('<img src="' + $(this).attr('src') + '" width="' + $(this).width() + '" />').load(function() {
  40                             if ($(this).height() > $(self).height()) {
  41                                 $(self).height($(this).height());
  42                             }
  43                         }).appendTo(this);
  44                     }
  45                 })
  46             }
  47             setTimeout(checkScroll, settings.checkInterval);
  48         }
  49
  50         checkScroll();
  51     };
  52 })(jQuery);