https://www.eastcoastcars.net/v9/media/js/unveil/1.3.0-ddc/jquery.unveil.js

1/**
2 * jQuery Unveil
3 * A very lightweight jQuery plugin to lazy load images
4 * http://luis-almeida.github.com/unveil
5 *
6 * TAKE NOTE: This script has been modified by Dealer.com to include dynamic image resizing support.
7 *
8 * Licensed under the MIT license.
9 * Copyright 2013 Luís Almeida
10 * https://github.com/luis-almeida
11 */
12
13;(function($) {
14
15  $.fn.unveil = function(threshold, callback) {
16
17    var $w = $(window),
18        th = threshold || 0,
19        retina = window.devicePixelRatio > 1,
20        attrib = retina ? "data-src-retina" : "data-src",
21        images = this,
22        loaded;
23
24    this.one("unveil", function() {
25      var source = this.getAttribute(attrib);
26      source = source || this.getAttribute("data-src");
27
28      if (source) {
29        source = dynamicResize(this, source);
30        this.setAttribute("src", source);
31      } else {
32        source = this.getAttribute("data-background-image");
33        if (source) {
34          source = dynamicResize(this, source);
35          if (this.getAttribute("style")) {
36            this.style['backgroundImage'] = "url('" + source + "')";
37          } else {
38            this.setAttribute('style', "background-image: url('" + source + "')");
39          }
40        }
41      }
42
43      if (typeof callback === "function") callback.call(this);
44    });
45
46    // This block of code (and usage of this function) added by Dealer.com to support dynamic image resizing based on parent container width.
47    function isDealerImage(url) {
48      var domainRegex = /(.*\/\/.*)?(pictures|images|static)(\.)([^.]+\.)?dealer\.com(.*)/;
49      if (url.indexOf('/static/') === 0 || domainRegex.test(url)) {
50        return true;
51      }
52      return false;
53    }
54
55    function addParam(source, name, value) {
56      if (source.indexOf('?' + name + '=') === -1 && source.indexOf('&' + name + '=') === -1) {
57        var param = name + "=" + value;
58        return (source.indexOf("?") === -1) ? source + "?" + param : source + "&" + param;
59      }
60      return source;
61    }
62
63    function addResizerParams(source, width) {
64      source = addParam(source, 'impolicy', 'downsize_bkpt');
65      source = addParam(source, 'w', width.toString());
66      return source;
67    }
68
69    function dynamicResize(target, source) {
70      if (!isDealerImage(source)) {
71        return source;
72      }
73
74      // Fix static.dealer.com paths to be /static/ while we're already modifying things.
75      if (source.indexOf('static.dealer.com') > -1) {
76        source = source.replace(/^(http(s?)\:)?\/\/static\.dealer\.com\//i, '/static/');
77      }
78
79      
80      if(target.classList.contains('dynamic-resize')) {
81        var $target = $(target);
82        var minImageWidth = $target.data('min-width');
83        var parentWidth = $target.closest('li').width() || $target.closest('div').width();
84        
85        parentWidth = minImageWidth && parentWidth < minImageWidth ? minImageWidth : parentWidth;
86
87        if (parentWidth > 0) {
88          source = addResizerParams(source, parentWidth);
89        }
90      } else if (target.classList.contains('dynamic-resize-background')) {
91        var width = $(target).width();
92        if (width > 0) {
93          source = addResizerParams(source, width);
94        }
95      }
96      return source;
97    }
98    // End block of code added by Dealer.com
99
100    function unveil() {
101      var inview = images.filter(function() {
102        var $e = $(this);
103
104        // This line was modified by Dealer.com to include the d-none class check
105        // to support the ws-content-cta widget functionality.
106        if ($e.is(":hidden") && !$e.hasClass("d-none")) return;
107
108        // This `ref` is needed because invisible elements have top offset values of 0
109        // and therefore the lazy loading thinks these elements are in view and loads loads them.
110        // This looks for the closest div above the hidden element and uses that to find the
111        // correct point to unveil the image.
112        var ref = $e.hasClass("d-none") ? $e.closest('div') : $e;
113
114        // If the top and height are still 0, skip the image for now.
115        if (ref.offset().top === 0 && ref.height() === 0) {
116          return;
117        }
118
119        var wt = $w.scrollTop(),
120            wb = wt + $w.height(),
121            et = ref.offset().top,
122            eb = et + ref.height();
123
124        return eb >= wt - th && et <= wb + th;
125      });
126
127      loaded = inview.trigger("unveil");
128      images = images.not(loaded);
129    }
130
131    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
132
133    unveil();
134
135    return this;
136
137  };
138
139})(window.jQuery || window.Zepto);