https://www.jerde.com/js/images.js?a=1790935026

1/* ---------------------------------------------
2 LAZY LOAD IMAGES
3------------------------------------------------ */
4document.addEventListener("DOMContentLoaded", function () {
5  var lazyloadImages = document.querySelectorAll("img.lazy-load");
6  var lazyloadThrottleTimeout;
7
8  function lazyload() {
9    // THROTTLE SCROLL EVENT FOR LESS IMPACT
10    if (lazyloadThrottleTimeout) {
11      clearTimeout(lazyloadThrottleTimeout);
12    }
13
14    lazyloadThrottleTimeout = setTimeout(function () {
15      var scrollTop = $(window).scrollTop();
16      for (var i = 0; i < lazyloadImages.length; i++) {
17        var img = lazyloadImages[i];
18
19        // Image should load in when they are 300px away from the viewport (so they'll be loaded once they reach it)
20        if ($(img).offset().top - 300 < window.innerHeight + scrollTop) {
21          // Update the src attribute with the value from the data-src attribute
22          var src = $(img).data("src");
23          $(img).attr("src", src);
24
25          // When images load, fade them in and crop them for mobile or desktop
26          $(img).on("load", function () {
27            $(img).addClass("imgSrcLoadOn");
28            $(img).removeClass("lazy-load");
29            if ($(img).data("crop")) {
30              var dw = 550;
31            } else {
32              var dw = $(img).data("w2");
33            }
34            if ($(window).width() < dw && $(img).data("which") != 50) {
35              $(img).attr("src", $(img).data("src50"));
36              $(img).data("which", 50);
37            } else if ($(window).width() > dw && $(img).data("which") != 100) {
38              $(img).attr("src", $(img).data("src"));
39              $(img).data("which", 100);
40            }
41          });
42        }
43      }
44
45      // REMOVE ALL DOCUMENT EVENTS ONCE IMAGES HAVE LOADED
46      if (document.querySelectorAll("img.lazy").length == 0) {
47        $(document).off("scroll.lazyLoad", lazyload);
48        $(window).off("resize.lazyLoad", lazyload);
49        $(window).off("orientationChange.lazyLoad", lazyload);
50      }
51    }, 20);
52  }
53
54  // LAZY LOAD ON SCROLL, RESIZE, & ORIENTATION CHANGE
55  // NOTE: Using namespaced events here so they can be removed without removing all scroll events, resize, orientation, etc.
56  $(document).on("scroll.lazyLoad", lazyload);
57  $(window).on("resize.lazyLoad", lazyload);
58  $(window).on("orientationChange.lazyLoad", lazyload);
59  lazyload();
60});
61
62/* ---------------------------------------------
63  OLD IMAGE FUNCTIONS
64------------------------------------------------ */
65$(document).ready(function () {
66  //--------------------IMAGE LOADING--------------------
67  $(".bgFadeImage").each(function () {
68    var $bg = $(this);
69    var image_url = $bg.data("src");
70    var $img = new Image();
71    $img.onload = function () {
72      $bg.css({
73        "background-image": "url(" + image_url + ")",
74      });
75      $bg.addClass("loaded");
76    };
77    $img.src = image_url;
78  });
79
80  // IMAGES
81  $("img.imgSrcLoad").each(function () {
82    var src = $(this).data("src");
83    if (src.indexOf("/thumbs") == 0) {
84      var srcA = src.split("/");
85      var srcB = srcA[2].split("x");
86      var sw = srcB[0];
87      var sh = srcB[1];
88      var tw = $(this).width();
89      var tempH = Math.floor(tw * (sh / sw));
90      $(this).css("height", tempH + "px");
91    }
92  });
93  /*
94  Set to "C" to zoom-crop towards the center,
95  or set to "T", "B", "L", "R", "TL", "TR", "BL", "BR"
96  */
97  $("img.imgSrc50").each(function () {
98    var src = $(this).data("src");
99    if (src.indexOf("/thumbs") == 0) {
100      var srcA = src.split("/");
101      var srcB = srcA[2].split("x");
102      $(this).attr("data-w", srcB[0]);
103      $(this).attr("data-h", srcB[1]);
104      $(this).attr("data-w2", Math.floor(srcB[0] / 2));

105      $(this).attr("data-h2", Math.floor(srcB[1] / 2));
106      $(this).data("which", 0);
107      if ($(this).data("crop")) {
108        var rep = "x50x" + $(this).data("crop") + "/files";
109        var src50 = src.replace("/files", rep);
110      } else {
111        var src50 = src.replace("/files", "x50/files");
112      }
113      $(this).attr("data-src100", src);
114      $(this).attr("data-src50", src50);
115      $(this).on("load", function () {
116        $(this).addClass("imgSrcLoadOn");
117      });
118    }
119  });
120  $(".bgFadeImage").each(function () {
121    var src = $(this).data("src");
122    if (src.indexOf("/thumbs") == 0) {
123      var srcA = src.split("/");
124      var srcB = srcA[2].split("x");
125      $(this).attr("data-w", srcB[0]);
126      $(this).attr("data-h", srcB[1]);
127      $(this).attr("data-w2", Math.floor(srcB[0] / 2));
128      $(this).attr("data-h2", Math.floor(srcB[1] / 2));
129      $(this).data("which", 0);
130      if ($(this).data("crop")) {
131        var rep = "x50x" + $(this).data("crop") + "/files";
132        var src50 = src.replace("/files", rep);
133      } else {
134        var src50 = src.replace("/files", "x50/files");
135      }
136      $(this).attr("data-src100", src);
137      $(this).attr("data-src50", src50);
138      $(this).on("load", function () {
139        $(this).addClass("imgSrcLoadOn");
140      });
141    }
142  });
143});
144
145function imgSrc50Go() {
146  $("img.imgSrc50").each(function () {
147    if ($(this).data("crop")) {
148      var dataWidth = 550;
149    } else {
150      var dataWidth = $(this).data("w2");
151    }
152    if ($(window).width() < dataWidth && $(this).data("which") != 50) {
153      $(this).attr("src", $(this).data("src50"));
154      $(this).data("which", 50);
155    } else if ($(window).width() > dataWidth && $(this).data("which") != 100) {
156      $(this).attr("src", $(this).data("src"));
157      $(this).data("which", 100);
158    }
159  });
160
161  $(".bgFadeImage").each(function () {
162    if ($(this).data("crop")) {
163      var dataWidth = 550;
164    } else {
165      var dataWidth = $(this).data("w2");
166    }
167    if ($(window).width() < dataWidth && $(this).data("which") != 50) {
168      $(this).attr("src", $(this).data("src50"));
169      $(this).data("which", 50);
170    } else if ($(window).width() > dataWidth && $(this).data("which") != 100) {
171      $(this).attr("src", $(this).data("src"));
172      $(this).data("which", 100);
173    }
174  });
175}
176
177$(window).on("load", function () {
178  $("img.imgSrcLoad").each(function () {
179    var src = $(this).data("src");
180    $(this).attr("src", src);
181    $(this).on("load", function () {
182      $(this).addClass("imgSrcLoadOn");
183    });
184    $(this).on("load", function () {
185      imgSrc50Go();
186    });
187  });
188});
189
190$(document).ready(function () {
191  imgSrc50Go();
192});
193$(window).on("load", function () {
194  imgSrc50Go();
195});
196$(window).resize(function () {
197  imgSrc50Go();
198});