diff --git a/gruntfile.js b/gruntfile.js
index 3fcdc472..dbe804c2 100644
--- 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
index 9ce086a3..c9f4da8f 100644
--- 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
index 47e7275b..fb8073cf 100644
--- 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
index a86cc70e..f610c090 100644
--- 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
-
+
```
### Local install
diff --git a/scripts/lazyload/dist/lazyload.es2015.js b/scripts/lazyload/dist/lazyload.es2015.js
index 697523f7..879076e5 100644
--- 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
index 3cc4b8db..0451835e 100644
--- 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();
}
diff --git a/scripts/lazyload/dist/lazyload.min.js b/scripts/lazyload/dist/lazyload.min.js
index d8715ec1..b61c2bdf 100644
--- a/scripts/lazyload/dist/lazyload.min.js
+++ b/scripts/lazyload/dist/lazyload.min.js
@@ -1 +1 @@
-var _extends=Object.assign||function(a){for(var b=1;b=d(a)+c+a.offsetHeight},i=function(a,b,c){return(b===window?window.pageXOffset:f(b))>=f(a)+c+a.offsetWidth},j=function(a,b,c){return!(e(a,b,c)||h(a,b,c)||g(a,b,c)||i(a,b,c))},k=function(a,b){var c=new a(b),d=new CustomEvent("LazyLoad::Initialized",{detail:{instance:c}});window.dispatchEvent(d)},l=function(a,b){var c=a.parentElement;if("PICTURE"===c.tagName)for(var d=0;d0;)d.splice(g.pop(),1),c(a.callback_processed,d.length);0===e&&this._stopScrollHandler(),h&&(this._isFirstLoop=!1)},_purgeElements:function(){var a=this._elements,b=a.length,c=void 0,d=[];for(c=0;c0;)a.splice(d.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var a=this,b=this._settings.throttle;0!==b?function(){var c=function(){(new Date).getTime()},d=c(),e=b-(d-a._previousLoopTime);e<=0||e>b?(a._loopTimeout&&(clearTimeout(a._loopTimeout),a._loopTimeout=null),a._previousLoopTime=d,a._loopThroughElements()):a._loopTimeout||(a._loopTimeout=setTimeout(function(){this._previousLoopTime=c(),this._loopTimeout=null,this._loopThroughElements()}.bind(a),e))}():this._loopThroughElements()},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var o=window.lazyLoadOptions;return o&&function(a,b){var c=b.length;if(c)for(var d=0;d=h(a)+c+a.offsetHeight},m=function(a,b,c){var d=b===window?window.pageXOffset:j(b);return d>=j(a)+c+a.offsetWidth},n=function(a,b,c){return!(i(a,b,c)||l(a,b,c)||k(a,b,c)||m(a,b,c))},o=function(a,b){var c=new a(b),d=new CustomEvent("LazyLoad::Initialized",{detail:{instance:c}});window.dispatchEvent(d)},p=function(a,b){var c=b.length;if(c)for(var d=0;d0;)a.splice(e.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var a=this._settings.throttle;if(0!==a){var b=Date.now(),c=a-(b-this._previousLoopTime);c<=0||c>a?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),c))}else this._loopThroughElements()},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var t=window.lazyLoadOptions;return t&&p(s,t),s});
\ No newline at end of file
diff --git a/scripts/lazyload/package.json b/scripts/lazyload/package.json
index 2cfa693d..e93a52b4 100644
--- a/scripts/lazyload/package.json
+++ b/scripts/lazyload/package.json
@@ -1,11 +1,11 @@
{
"name": "vanilla-lazyload",
- "version": "8.0.1",
+ "version": "8.0.3",
"description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG",
"main": "dist/lazyload.min.js",
"devDependencies": {
"babel-plugin-transform-object-assign": "^6.22.0",
- "babel-preset-es2015": "^6.18.0",
+ "babel-preset-es2015": "^6.24.1",
"grunt": "^1.0.1",
"grunt-babel": "^6.0.0",
"grunt-contrib-concat": "^1.0.1",
diff --git a/scripts/lazyload/src/lazyload.core.js b/scripts/lazyload/src/lazyload.core.js
index 2d1d003c..0f1b1066 100644
--- a/scripts/lazyload/src/lazyload.core.js
+++ b/scripts/lazyload/src/lazyload.core.js
@@ -6,7 +6,7 @@ import setSources from "./lazyload.setSources";
/*
* Constructor
- */
+ */
const LazyLoad = function(instanceSettings) {
this._settings = Object.assign({}, defaultSettings, instanceSettings);
@@ -89,7 +89,7 @@ LazyLoad.prototype = {
}
}
/* 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);
@@ -145,8 +145,7 @@ LazyLoad.prototype = {
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) {
@@ -157,7 +156,7 @@ LazyLoad.prototype = {
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/src/lazyload.setSources.js b/scripts/lazyload/src/lazyload.setSources.js
index e9539146..68fe6b6c 100644
--- a/scripts/lazyload/src/lazyload.setSources.js
+++ b/scripts/lazyload/src/lazyload.setSources.js
@@ -1,4 +1,4 @@
-const setSourcesForPicture = function(element, srcsetDataAttribute) {
+const setSourcesForPicture = function (element, srcsetDataAttribute) {
const parent = element.parentElement;
if (parent.tagName !== "PICTURE") {
return;
@@ -14,19 +14,27 @@ const setSourcesForPicture = function(element, srcsetDataAttribute) {
}
};
-export default function(element, srcsetDataAttribute, srcDataAttribute) {
+export default 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}")`;
+ }
};
\ No newline at end of file