update and custom lazyLoad plugin to support IE9 & IE10 #214

psolom · Aug 12, 2017 · 2e636e7 · 2e636e7
1 parent e023dbc
commit 2e636e7
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 64 deletions.
diff --git a/gruntfile.js b/gruntfile.js
@@ -12,6 +12,8 @@ module.exports = function(grunt) {
                     'scripts/filemanager.min.js': ['scripts/filemanager.js'],
                     'scripts/jquery-ui/jquery-ui.min.js': ['scripts/jquery-ui/jquery-ui.js'],
                     'scripts/jquery.fileDownload/jquery.fileDownload.min.js': ['scripts/jquery.fileDownload/jquery.fileDownload.js'],
+                    // lazyLoad script was modified to support IE9 & IE10
+                    'scripts/lazyload/dist/lazyload.min.js': ['scripts/lazyload/dist/lazyload.js'],
                     'scripts/purl/purl.min.js': ['scripts/purl/purl.js']
                 }
             }

diff --git a/scripts/lazyload/.eslintrc.json b/scripts/lazyload/.eslintrc.json
@@ -42,7 +42,7 @@
         "no-labels": 1,
         "no-lone-blocks": 1,
         "no-loop-func": 1,
-        "no-magic-numbers": 1,
+        "no-magic-numbers": [2, { "ignore": [0, 1] }],
         "no-multi-spaces": 1,
         "no-multi-str": 1,
         "no-new": 1,

diff --git a/scripts/lazyload/Gruntfile.js b/scripts/lazyload/Gruntfile.js
@@ -42,7 +42,7 @@ module.exports = function (grunt) {
 		},
 		watch: {
 			files: ["<%= eslint.src %>"],
-			tasks: ["eslint", "babel", "uglify"]
+			tasks: ["eslint", "rollup", "babel", "uglify"]
 		}
 	});
 

diff --git a/scripts/lazyload/README.md b/scripts/lazyload/README.md
@@ -1,4 +1,4 @@
-LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading images only as they enter the viewport**. LazyLoad is written in plain (vanilla) Javascript, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it's SEO friendly and it has some others [notable features](#notable-features). 
+LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading images only as they enter the viewport**. LazyLoad is written in plain (vanilla) Javascript, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it's SEO friendly and it has some other [notable features](#notable-features). 
 
 Check out the [LazyLoad website](https://verlok.github.io/lazyload/), in case you're reading this on GitHub.
 
@@ -14,7 +14,7 @@ Jump to:
 Just include the [latest version](https://cdnjs.com/libraries/vanilla-lazyload) script, e.g. like that:
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/7.2.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.0.1/lazyload.min.js"></script>
 ```
 
 ### Local install

diff --git a/scripts/lazyload/dist/lazyload.es2015.js b/scripts/lazyload/dist/lazyload.es2015.js
@@ -91,7 +91,7 @@
         }
     };
 
-    const setSourcesForPicture = function(element, srcsetDataAttribute) {
+    const setSourcesForPicture = function (element, srcsetDataAttribute) {
         const parent = element.parentElement;
         if (parent.tagName !== "PICTURE") {
             return;
@@ -107,26 +107,34 @@
         }
     };
 
-    var setSources = function(element, srcsetDataAttribute, srcDataAttribute) {
+    var setSources = function (element, srcsetDataAttribute, srcDataAttribute) {
         const tagName = element.tagName;
         const elementSrc = element.dataset[srcDataAttribute];
         if (tagName === "IMG") {
             setSourcesForPicture(element, srcsetDataAttribute);
             const imgSrcset = element.dataset[srcsetDataAttribute];
-            if (imgSrcset) { element.setAttribute("srcset", imgSrcset); }
-            if (elementSrc) { element.setAttribute("src", elementSrc); }
+            if (imgSrcset) {
+                element.setAttribute("srcset", imgSrcset);
+            }
+            if (elementSrc) {
+                element.setAttribute("src", elementSrc);
+            }
             return;
         }
         if (tagName === "IFRAME") {
-            if (elementSrc) { element.setAttribute("src", elementSrc); }
+            if (elementSrc) {
+                element.setAttribute("src", elementSrc);
+            }
             return;
         }
-        if (elementSrc) { element.style.backgroundImage = "url(" + elementSrc + ")"; }
+        if (elementSrc) {
+            element.style.backgroundImage = `url("${elementSrc}")`;
+        }
     };
 
     /*
      * Constructor
-     */ 
+     */
 
     const LazyLoad = function(instanceSettings) {
         this._settings = Object.assign({}, defaultSettings, instanceSettings);
@@ -209,7 +217,7 @@
                 }
             }
             /* Removing processed elements from this._elements. */
-            while (processedIndexes.length > 0) {
+            while (processedIndexes.length) {
                 elements.splice(processedIndexes.pop(), 1);
                 /* Calling the end loop callback */
                 callCallback(settings.callback_processed, elements.length);
@@ -265,8 +273,7 @@
             const throttle = this._settings.throttle;
 
             if (throttle !== 0) {
-                const getTime = () => { (new Date()).getTime(); };
-                let now = getTime();
+                let now = Date.now();
                 let remainingTime = throttle - (now - this._previousLoopTime);
                 if (remainingTime <= 0 || remainingTime > throttle) {
                     if (this._loopTimeout) {
@@ -277,7 +284,7 @@
                     this._loopThroughElements();
                 } else if (!this._loopTimeout) {
                     this._loopTimeout = setTimeout(function () {
-                        this._previousLoopTime = getTime();
+                        this._previousLoopTime = Date.now();
                         this._loopTimeout = null;
                         this._loopThroughElements();
                     }.bind(this), remainingTime);

diff --git a/scripts/lazyload/dist/lazyload.js b/scripts/lazyload/dist/lazyload.js
@@ -96,7 +96,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         for (var i = 0; i < parent.children.length; i++) {
             var pictureChild = parent.children[i];
             if (pictureChild.tagName === "SOURCE") {
-                var sourceSrcset = pictureChild.dataset[srcsetDataAttribute];
+                var sourceSrcset = getData(pictureChild, srcsetDataAttribute);
                 if (sourceSrcset) {
                     pictureChild.setAttribute("srcset", sourceSrcset);
                 }
@@ -106,10 +106,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 
     var setSources = function setSources(element, srcsetDataAttribute, srcDataAttribute) {
         var tagName = element.tagName;
-        var elementSrc = element.dataset[srcDataAttribute];
+        var elementSrc = getData(element, srcDataAttribute);
         if (tagName === "IMG") {
             setSourcesForPicture(element, srcsetDataAttribute);
-            var imgSrcset = element.dataset[srcsetDataAttribute];
+            var imgSrcset = getData(element, srcsetDataAttribute);
             if (imgSrcset) {
                 element.setAttribute("srcset", imgSrcset);
             }
@@ -125,10 +125,26 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
             return;
         }
         if (elementSrc) {
-            element.style.backgroundImage = "url(" + elementSrc + ")";
+            element.style.backgroundImage = 'url("' + elementSrc + '")';
         }
     };
 
+    function setData(element, key, value) {
+        window.jQuery ? $(element).data(key, value) : element.dataset[key] = value;
+    }
+
+    function getData(element, key) {
+        return window.jQuery ? $(element).data(key) : element.dataset[key];
+    }
+
+    function removeClass(element, className) {
+        window.jQuery ? $(element).removeClass(className) : element.classList.remove(className);
+    }
+
+    function addClass(element, className) {
+        window.jQuery ? $(element).addClass(className) : element.classList.add(className);
+    }
+
     /*
      * Constructor
      */
@@ -162,8 +178,8 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
                 }
                 element.removeEventListener("load", loadCallback);
                 element.removeEventListener("error", errorCallback);
-                element.classList.remove(settings.class_loading);
-                element.classList.add(settings.class_error);
+                removeClass(element, settings.class_loading);
+                addClass(element, settings.class_error);
                 callCallback(settings.callback_error, element);
             };
 
@@ -172,8 +188,8 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
                 if (!settings) {
                     return;
                 }
-                element.classList.remove(settings.class_loading);
-                element.classList.add(settings.class_loaded);
+                removeClass(element, settings.class_loading);
+                addClass(element, settings.class_loaded);
                 element.removeEventListener("load", loadCallback);
                 element.removeEventListener("error", errorCallback);
                 /* Calling LOAD callback */
@@ -183,7 +199,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
             if (element.tagName === "IMG" || element.tagName === "IFRAME") {
                 element.addEventListener("load", loadCallback);
                 element.addEventListener("error", errorCallback);
-                element.classList.add(settings.class_loading);
+                addClass(element, settings.class_loading);
             }
 
             setSources(element, settings.data_srcset, settings.data_src);
@@ -208,17 +224,17 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 
                 if (isBot || isInsideViewport(element, settings.container, settings.threshold)) {
                     if (firstLoop) {
-                        element.classList.add(settings.class_initial);
+                        addClass(element, settings.class_initial);
                     }
                     /* Start loading the image */
                     this._reveal(element);
                     /* Marking the element as processed. */
                     processedIndexes.push(i);
-                    element.dataset.wasProcessed = true;
+                    setData(element, 'wasProcessed', true);
                 }
             }
             /* Removing processed elements from this._elements. */
-            while (processedIndexes.length > 0) {
+            while (processedIndexes.length) {
                 elements.splice(processedIndexes.pop(), 1);
                 /* Calling the end loop callback */
                 callCallback(settings.callback_processed, elements.length);
@@ -242,7 +258,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
             for (i = 0; i < elementsLength; i++) {
                 var element = elements[i];
                 /* If the element has already been processed, skip it */
-                if (element.dataset.wasProcessed) {
+                if (getData(element, 'wasProcessed')) {
                     elementsToPurge.push(i);
                 }
             }
@@ -271,32 +287,25 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
          */
 
         handleScroll: function handleScroll() {
-            var _this = this;
-
             var throttle = this._settings.throttle;
 
             if (throttle !== 0) {
-                (function () {
-                    var getTime = function getTime() {
-                        new Date().getTime();
-                    };
-                    var now = getTime();
-                    var remainingTime = throttle - (now - _this._previousLoopTime);
-                    if (remainingTime <= 0 || remainingTime > throttle) {
-                        if (_this._loopTimeout) {
-                            clearTimeout(_this._loopTimeout);
-                            _this._loopTimeout = null;
-                        }
-                        _this._previousLoopTime = now;
-                        _this._loopThroughElements();
-                    } else if (!_this._loopTimeout) {
-                        _this._loopTimeout = setTimeout(function () {
-                            this._previousLoopTime = getTime();
-                            this._loopTimeout = null;
-                            this._loopThroughElements();
-                        }.bind(_this), remainingTime);
+                var now = Date.now();
+                var remainingTime = throttle - (now - this._previousLoopTime);
+                if (remainingTime <= 0 || remainingTime > throttle) {
+                    if (this._loopTimeout) {
+                        clearTimeout(this._loopTimeout);
+                        this._loopTimeout = null;
                     }
-                })();
+                    this._previousLoopTime = now;
+                    this._loopThroughElements();
+                } else if (!this._loopTimeout) {
+                    this._loopTimeout = setTimeout(function () {
+                        this._previousLoopTime = Date.now();
+                        this._loopTimeout = null;
+                        this._loopThroughElements();
+                    }.bind(this), remainingTime);
+                }
             } else {
                 this._loopThroughElements();
             }