https://www.todaylens.com/sites/all/modules/lazyloader/jquery.lazyloader.js

1/**
2 * @file
3 * Lazyloader JQuery plugin
4 *
5 * @author: Daniel Honrade http://drupal.org/user/351112
6 *
7 * Settings:
8 * - distance = distance of the image to the viewable browser screen before it gets loaded
9 * - icon     = animating image that appears before the actual image is loaded
10 *
11 */
12
13(function($){
14
15  // Window jQuery object global reference.
16  var $window;
17
18  // Process lazyloader
19  $.fn.lazyloader = function(options){
20    var settings = $.extend($.fn.lazyloader.defaults, options);
21    var images = this;
22
23    if (typeof($window) == 'undefined') {
24      $window = $(window);
25    }
26
27    // add the loader icon
28    if(settings['icon'] != '') $('img[data-src]').parent().css({ position: 'relative', display: 'block'}).prepend('<img class="lazyloader-icon" src="' + settings['icon'] + '" />');
29
30    // Load on refresh
31    loadActualImages(images, settings);
32
33    // Load on scroll
34    $window.bind('scroll', function(e) {
35      loadActualImages(images, settings);
36    });
37
38    // Load on resize
39    $window.resize(function(e) {
40      loadActualImages(images, settings);
41    });
42
43    return this;
44  };
45
46  // Defaults
47  $.fn.lazyloader.defaults = {
48    distance: 0, // the distance (in pixels) of image when loading of the actual image will happen
49    icon: ''    // display animating icon
50  };
51
52
53  // Loading actual images
54  function loadActualImages(images, settings){
55    clearTimeout($.fn.lazyloader.timeout);
56
57    $.fn.lazyloader.timeout = setTimeout(function(){
58      images.each(function(){
59        var $image = $(this);
60        var imageHeight = $image.height(), imageWidth = $image.width();
61        var iconTop = Math.round(imageHeight/2), iconLeft = Math.round(imageWidth/2), iconFactor = Math.round($image.siblings('img.lazyloader-icon').height()/2);
62        $image.siblings('img.lazyloader-icon').css({ top: iconTop - iconFactor, left: iconLeft - iconFactor });
63
64        if (windowView(this, settings) && ($image.attr('data-src'))) {
65          loadImage(this);
66          $image.fadeIn('slow');
67        }
68      });
69    }, Drupal.settings.lazyloader.loadImageDelay);
70  }
71
72
73  // Check if the images are within the window view (top, bottom, left and right)
74  function windowView(image, settings){
75    var $image = $(image);
76    // window variables
77    var windowHeight = $window.height(),
78        windowWidth  = $window.width(),
79
80        windowBottom = windowHeight + $window.scrollTop(),
81        windowTop    = windowBottom - windowHeight,
82        windowRight  = windowWidth + $window.scrollLeft(),
83        windowLeft   = windowRight - windowWidth,
84
85        // image variables
86        imageHeight  = $image.height(),
87        imageWidth   = $image.width(),
88
89        imageTop     = $image.offset().top - settings['distance'],
90        imageBottom  = imageTop + imageHeight + settings['distance'],
91        imageLeft    = $image.offset().left - settings['distance'],
92        imageRight   = imageLeft + imageWidth + settings['distance'];
93
94           // This will return true if any corner of the image is within the screen
95    return (((windowBottom >= imageTop) && (windowTop <= imageTop)) || ((windowBottom >= imageBottom) && (windowTop <= imageBottom))) &&
96           (((windowRight >= imageLeft) && (windowLeft <= imageLeft)) || ((windowRight >= imageRight) && (windowLeft <= imageRight)));
97  }
98
99
100  // Load the image
101  function loadImage(image){
102    var $image = $(image);
103    $image.hide().attr('src', $image.data('src')).removeAttr('data-src');
104    $image.load(function() {
105      $image.siblings('img.lazyloader-icon').remove();
106    });
107  }
108
109})(jQuery);