Skip to content

Commit

Permalink
Releasing 8.15.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@verlok
verlok committed Sep 2, 2018
1 parent 69586ca commit 016213a
Show file tree
Hide file tree
Showing 13 changed files with 529 additions and 433 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,10 @@ LazyLoad is now _faster_ thanks to the [Intersection Observer API](https://devel

## Version 8

#### 8.15.2

**BUGFIX**: Class `loaded` was not applied to a loaded video (issue #239).

#### 8.15.1

**BUGFIX**: Autoplaying video not loaded correctly after entering the viewport (issue #240). Thanks to @maeligg.
Expand Down
10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Version **8.x** is recommended for [local install](#local-install), but you can
Version 8.x - [versions info](#versions-information)

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.1/lazyload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.2/lazyload.min.js"></script>
```

Version 10.x - [versions info](#versions-information)
Expand All @@ -45,7 +45,7 @@ You can do it with the following script:
(function(w, d){
var b = d.getElementsByTagName('body')[0];
var s = d.createElement("script");
var v = !("IntersectionObserver" in w) ? "8.15.1" : "10.16.1";
var v = !("IntersectionObserver" in w) ? "8.15.2" : "10.16.1";
s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
w.lazyLoadOptions = {/* Your options here */};
Expand All @@ -63,15 +63,15 @@ The file `lazyload.min.js` is provided as UMD (<small>Universal Module Definitio
If you use [RequireJS](https://requirejs.org) to dynamically load modules in your website, you can take advantage of it.

```js
define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.1/lazyload.amd.min.js"], function (LazyLoad) {
define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.2/lazyload.amd.min.js"], function (LazyLoad) {
return LazyLoad;
});
```

You can also [conditionally load](#conditional-load) the best version.

```js
var v = !("IntersectionObserver" in window) ? "8.15.1" : "10.16.1";
var v = !("IntersectionObserver" in window) ? "8.15.2" : "10.16.1";
define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.amd.min.js"], function (LazyLoad) {
return LazyLoad;
});
Expand All @@ -86,7 +86,7 @@ If you prefer to install LazyLoad locally in your project, you can either:
Version 8.x, _recommended_ - [versions info](#versions-information)

```
npm install [email protected].1
npm install [email protected].2
```

Version 10.x - [versions info](#versions-information)
Expand Down
233 changes: 128 additions & 105 deletions dist/lazyload.amd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,6 @@ define(function () {
};
};

var callCallback = function callCallback(callback, argument) {
if (callback) {
callback(argument);
}
};

var getTopOffset = function getTopOffset(element) {
return element.getBoundingClientRect().top + window.pageYOffset - element.ownerDocument.documentElement.clientTop;
};
Expand Down Expand Up @@ -98,26 +92,6 @@ define(function () {
}
}

var dataPrefix = "data-";
var processedDataName = "was-processed";
var processedDataValue = "true";

var getData = function getData(element, attribute) {
return element.getAttribute(dataPrefix + attribute);
};

var setData = function setData(element, attribute, value) {
return element.setAttribute(dataPrefix + attribute, value);
};

var setWasProcessed = function setWasProcessed(element) {
return setData(element, processedDataName, processedDataValue);
};

var getWasProcessed = function getWasProcessed(element) {
return getData(element, processedDataName) === processedDataValue;
};

var replaceExtToWebp = function replaceExtToWebp(value, condition) {
return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
};
Expand All @@ -140,6 +114,47 @@ define(function () {

var supportsWebp = runningOnBrowser && detectWebp();

var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};

var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};

var dataPrefix = "data-";
var processedDataName = "was-processed";
var processedDataValue = "true";

var getData = function getData(element, attribute) {
return element.getAttribute(dataPrefix + attribute);
};

var setData = function setData(element, attribute, value) {
var attrName = dataPrefix + attribute;
if (value === null) {
element.removeAttribute(attrName);
return;
}
element.setAttribute(attrName, value);
};

var setWasProcessedData = function setWasProcessedData(element) {
return setData(element, processedDataName, processedDataValue);
};

var getWasProcessedData = function getWasProcessedData(element) {
return getData(element, processedDataName) === processedDataValue;
};

var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebpFlag) {
for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
if (childTag.tagName === "SOURCE") {
Expand Down Expand Up @@ -213,20 +228,78 @@ define(function () {
setSourcesBgImage(element, settings);
};

var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
var callbackIfSet = function callbackIfSet(callback, argument) {
if (callback) {
callback(argument);
}
element.className += (element.className ? " " : "") + className;
};

var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
var genericLoadEventName = "load";
var mediaLoadEventName = "loadeddata";
var errorEventName = "error";

var addEventListener = function addEventListener(element, eventName, handler) {
element.addEventListener(eventName, handler);
};

var removeEventListener = function removeEventListener(element, eventName, handler) {
element.removeEventListener(eventName, handler);
};

var addAllEventListeners = function addAllEventListeners(element, loadHandler, errorHandler) {
addEventListener(element, genericLoadEventName, loadHandler);
addEventListener(element, mediaLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
};

var removeAllEventListeners = function removeAllEventListeners(element, loadHandler, errorHandler) {
removeEventListener(element, genericLoadEventName, loadHandler);
removeEventListener(element, mediaLoadEventName, loadHandler);
removeEventListener(element, errorEventName, errorHandler);
};

var eventHandler = function eventHandler(event, success, settings) {
var className = success ? settings.class_loaded : settings.class_error;
var callback = success ? settings.callback_load : settings.callback_error;
var element = event.target;

removeClass(element, settings.class_loading);
addClass(element, className);
callbackIfSet(callback, element);
};

var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
var loadHandler = function loadHandler(event) {
eventHandler(event, true, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
};
var errorHandler = function errorHandler(event) {
eventHandler(event, false, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
};
addAllEventListeners(element, loadHandler, errorHandler);
};

var managedTags = ["IMG", "IFRAME", "VIDEO"];

function revealElement(element, settings, force) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true
}
callbackIfSet(settings.callback_enter, element);
if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setWasProcessedData(element);
callbackIfSet(settings.callback_set, element);
}

var removeFromArray = function removeFromArray(elements, indexes) {
while (indexes.length) {
elements.splice(indexes.pop(), 1);
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};

/*
Expand All @@ -247,54 +320,22 @@ define(function () {
};

LazyLoad.prototype = {
_reveal: function _reveal(element, force) {
if (!force && getWasProcessed(element)) {
return; // element has already been processed and force wasn't true
}

var settings = this._settings;

var errorCallback = function errorCallback() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
callCallback(settings.callback_error, element);
};

var loadCallback = function loadCallback() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
removeClass(element, settings.class_loading);
addClass(element, settings.class_loaded);
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
callCallback(settings.callback_load, element);
};

callCallback(settings.callback_enter, element);
if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
element.addEventListener("load", loadCallback);
element.addEventListener("error", errorCallback);
addClass(element, settings.class_loading);
}
setSources(element, settings);
callCallback(settings.callback_set, element);
},

_loopThroughElements: function _loopThroughElements(forceDownload) {
var settings = this._settings,
elements = this._elements,
elementsLength = !elements ? 0 : elements.length;
var i = void 0,
processedIndexes = [],
firstLoop = this._isFirstLoop;
isFirstLoop = this._isFirstLoop;

if (isFirstLoop) {
this._isFirstLoop = false;
}

if (elementsLength === 0) {
this._stopScrollHandler();
return;
}

for (i = 0; i < elementsLength; i++) {
var element = elements[i];
Expand All @@ -304,48 +345,30 @@ define(function () {
}

if (isBot || forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
if (firstLoop) {
if (isFirstLoop) {
addClass(element, settings.class_initial);
}
/* Start loading the image */
this.load(element);
/* Marking the element as processed. */
processedIndexes.push(i);
setWasProcessed(element);
}
}
/* Removing processed elements from this._elements. */
while (processedIndexes.length) {
elements.splice(processedIndexes.pop(), 1);
callCallback(settings.callback_processed, elements.length);
}
/* Stop listening to scroll event when 0 elements remains */
if (elementsLength === 0) {
this._stopScrollHandler();
}
/* Sets isFirstLoop to false */
if (firstLoop) {
this._isFirstLoop = false;
}

// Removing processed elements from this._elements.
removeFromArray(elements, processedIndexes);
},

_purgeElements: function _purgeElements() {
var elements = this._elements,
elementsLength = elements.length;
var i = void 0,
elementsToPurge = [];
processedIndexes = [];

for (i = 0; i < elementsLength; i++) {
var element = elements[i];
/* If the element has already been processed, skip it */
if (getWasProcessed(element)) {
elementsToPurge.push(i);
if (getWasProcessedData(elements[i])) {
processedIndexes.push(i);
}
}
/* Removing elements to purge from this._elements. */
while (elementsToPurge.length > 0) {
elements.splice(elementsToPurge.pop(), 1);
}
removeFromArray(elements, processedIndexes);
},

_startScrollHandler: function _startScrollHandler() {
Expand Down Expand Up @@ -412,7 +435,7 @@ define(function () {
},

load: function load(element, force) {
this._reveal(element, force);
revealElement(element, this._settings, force);
}
};

Expand Down
Loading

0 comments on commit 016213a

Please sign in to comment.