|
5 | 5 |
|
6 | 6 | (function(window, document){ |
7 | 7 | var |
| 8 | + // The primary goal here is to keep this script as small as possible |
| 9 | + // while maintaining functionality. The uglifier goes a long way, |
| 10 | + // but we can take things a bit farther by saving strings for |
| 11 | + // frequently used method and strings. |
| 12 | + fe = "forEach", |
| 13 | + qsa = "querySelectorAll", |
| 14 | + pn = "parentNode", |
| 15 | + gbcr = "getBoundingClientRect", |
| 16 | + pr = "prototype", |
| 17 | + io = "IntersectionObserver", |
| 18 | + ioe = io + "Entry", |
| 19 | + ln = "length", |
| 20 | + dss = "data-srcset", |
8 | 21 | // Placeholders used for event handler strings. |
9 | 22 | documentEvents = ["scroll", "touchmove"], |
10 | 23 | windowEvents = ["orientationchange", "resize"], |
11 | 24 | // Tracks if yall is currently processing. Used for throttling. Only matters if IntersectionObserver is unsupported. |
12 | 25 | active = 0, |
| 26 | + // Placeholder for elements |
| 27 | + elements, |
13 | 28 | // Replaces target attribute value with source attribute, if applicable |
14 | | - replaceAttr = function(node, sattr, tattr){ |
15 | | - var v = node.getAttribute(sattr); |
| 29 | + replaceAttr = function(node, sourceAttr, targetAttr){ |
| 30 | + var v = node.getAttribute(sourceAttr); |
| 31 | + |
16 | 32 | if(v){ |
17 | | - node[tattr] = v; |
18 | | - node.removeAttribute(sattr); |
| 33 | + node[targetAttr] = v; |
| 34 | + node.removeAttribute(sourceAttr); |
19 | 35 | } |
20 | 36 | }, |
21 | 37 | // The handler to load the image |
22 | 38 | loadImage = function(img){ |
23 | | - if(img.parentNode.tagName == "PICTURE"){ |
24 | | - Array.prototype.slice.call(img.parentNode.querySelectorAll("source")).forEach(function(source){ |
25 | | - replaceAttr(source, "data-srcset", "srcset"); |
| 39 | + if(img[pn].tagName == "PICTURE"){ |
| 40 | + Array[pr].slice.call(img[pn][qsa]("source"))[fe](function(source){ |
| 41 | + replaceAttr(source, dss, "srcset"); |
26 | 42 | }); |
27 | 43 | } |
28 | 44 |
|
29 | 45 | replaceAttr(img, "data-src", "src"); |
30 | | - replaceAttr(img, "data-srcset", "srcset"); |
| 46 | + replaceAttr(img, dss, "srcset"); |
31 | 47 | img.classList.remove("lazy"); |
32 | 48 | elements.splice(elements.indexOf(img), 1); |
33 | 49 | }, |
34 | 50 | // A multiple event binding handler. |
35 | 51 | multiBind = function(obj, handlers, fn, remove){ |
36 | | - handlers.forEach(function(handler){ |
| 52 | + handlers[fe](function(handler){ |
37 | 53 | remove ? obj.removeEventListener(handler, fn) : obj.addEventListener(handler, fn); |
38 | 54 | }); |
39 | 55 | }, |
40 | 56 | // The guts of the lazy loader (now only used when IntersectionObserver is not supported) |
41 | 57 | yall = function(){ |
42 | | - if(!elements.length){ |
| 58 | + if(!elements[ln]){ |
| 59 | + // There are no more elements to lazy load, so we'll unbind everything. |
43 | 60 | multiBind(document, documentEvents, yall, 1); |
44 | 61 | multiBind(window, windowEvents, yall, 1); |
45 | 62 | } |
46 | 63 |
|
| 64 | + // Check if the lazy loader is active |
47 | 65 | if(!active){ |
48 | 66 | active = 1; |
49 | 67 |
|
50 | 68 | setTimeout(function(){ |
51 | | - elements.forEach(function(img){ |
52 | | - if((img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0) && getComputedStyle(img).display != "none"){ |
| 69 | + elements[fe](function(img){ |
| 70 | + if((img[gbcr]().top <= window.innerHeight && img[gbcr]().bottom >= 0) && getComputedStyle(img).display != "none"){ |
53 | 71 | loadImage(img); |
54 | 72 | } |
55 | 73 | }); |
|
61 | 79 |
|
62 | 80 | // Everything's kicked off on DOMContentLoaded |
63 | 81 | multiBind(document, ["DOMContentLoaded"], function(){ |
64 | | - elements = Array.prototype.slice.call(document.querySelectorAll("img.lazy")); |
| 82 | + elements = Array[pr].slice.call(document[qsa]("img.lazy")); |
65 | 83 |
|
66 | | - if(elements.length){ |
| 84 | + // We're only going to do stuff if we found `img.lazy` elements |
| 85 | + if(elements[ln]){ |
67 | 86 | // This compatibility check has been taken from https://github.com/WICG/IntersectionObserver/blob/gh-pages/polyfill/intersection-observer.js |
68 | | - if("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in IntersectionObserverEntry.prototype){ |
69 | | - ob = new IntersectionObserver(function(entries, observer){ |
70 | | - entries.forEach(function(entry){ |
| 87 | + if(io in window && ioe in window && "intersectionRatio" in window[ioe][pr]){ |
| 88 | + var imageObserver = new window[io](function(entries, observer){ |
| 89 | + entries[fe](function(entry){ |
71 | 90 | if(entry.isIntersecting){ |
72 | 91 | loadImage(entry.target); |
73 | | - if(!elements.length) observer.disconnect(); |
| 92 | + |
| 93 | + if(!elements[ln]){ |
| 94 | + observer.disconnect(); |
| 95 | + } |
74 | 96 | } |
75 | 97 | }); |
76 | 98 | }); |
77 | 99 |
|
78 | | - elements.forEach(function(img){ |
79 | | - ob.observe(img); |
| 100 | + elements[fe](function(img){ |
| 101 | + imageObserver.observe(img); |
80 | 102 | }); |
81 | | - |
82 | | - return; |
83 | 103 | } |
84 | | - |
85 | | - // If IntersectionObserver isn't available, we'll do things the old way. |
86 | | - yall(); |
87 | | - multiBind(document, documentEvents, yall); |
88 | | - multiBind(window, windowEvents, yall); |
| 104 | + else{ |
| 105 | + // If IntersectionObserver isn't available, we'll do things the old way. |
| 106 | + yall(); |
| 107 | + multiBind(document, documentEvents, yall); |
| 108 | + multiBind(window, windowEvents, yall); |
| 109 | + } |
89 | 110 | } |
90 | 111 | }); |
91 | 112 | })(window, document); |
0 commit comments