Skip to content

Commit

Permalink
Merge branch 'release/10.16.2'
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrea Verlicchi committed Aug 31, 2018
2 parents 91fa7fb + 7f22233 commit 0f1f5ee
Show file tree
Hide file tree
Showing 18 changed files with 339 additions and 201 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Version 10

#### 10.16.2

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

#### 10.16.1

**BUGFIX**: Autoplaying video not loaded correctly after entering the viewport (issue #240). Thanks to @maeligg.
Expand Down Expand Up @@ -154,6 +158,10 @@ LazyLoad is now _faster_ thanks to the [Intersection Observer API](https://devel

## Version 8

#### 8.15.1

**BUGFIX**: Autoplaying video not loaded correctly after entering the viewport (issue #240). Thanks to @maeligg.

#### 8.15.0

- Refactorized code & improved script performance
Expand Down
10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Version 8.x - [versions info](#versions-information)
Version 10.x - [versions info](#versions-information)

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

The file `lazyload.min.js` is provided as UMD (<small>Universal Module Definition</small>).
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.0" : "10.16.1";
var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.16.2";
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 @@ -71,7 +71,7 @@ define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazy
You can also [conditionally load](#conditional-load) the best version.

```js
var v = !("IntersectionObserver" in window) ? "8.15.0" : "10.16.1";
var v = !("IntersectionObserver" in window) ? "8.15.0" : "10.16.2";
define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.amd.min.js"], function (LazyLoad) {
return LazyLoad;
});
Expand All @@ -92,7 +92,7 @@ npm install [email protected]
Version 10.x - [versions info](#versions-information)

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

#### Install with bower
Expand Down Expand Up @@ -726,7 +726,7 @@ Here's the list of the options.
| `class_loaded` | The class applied to the elements when the loading is complete | `"loaded"` |
| `class_error` | The class applied to the elements when the element causes an error | `"error"` |
| `to_webp` | A boolean flag that activates the dynamic switch to WEBP feature. [More info](#switch-to-webp). | `false` |
| `load_delay` | [**Available only in version 10.16.1-beta**] The time (in milliseconds) each image needs to stay inside the viewport before its loading begins. | `0` |
| `load_delay` | [**Available only in version 10.16.2-beta**] The time (in milliseconds) each image needs to stay inside the viewport before its loading begins. | `0` |
| `callback_enter` | A function to be called when the DOM element enters the viewport. | `null` |
| `callback_set` | A function to be called after the src of an image is set in the DOM. | `null` |
| `callback_load` | A function to be called when an element was loaded. | `null` |
Expand Down
107 changes: 65 additions & 42 deletions demos/iframes.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8">
<title>
Expand All @@ -13,47 +14,69 @@
}
</style>
</head>

<body>
<div id="results1" class="results">
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<iframe data-src="iframes/i01.html" frameborder="0"></iframe>
<iframe data-src="iframes/i02.html" frameborder="0"></iframe>
<iframe data-src="iframes/i03.html" frameborder="0"></iframe>
</div>
<script src="../dist/lazyload.min.js"></script>
<script>
new LazyLoad({
elements_selector: "iframe"
});
</script>
<div id="results1" class="results">
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<p>Scroll down to see lazily loaded iframes</p>
<iframe class="lazy" data-src="iframes/i01.html" frameborder="0"></iframe>
<iframe class="lazy" data-src="iframes/i02.html" frameborder="0"></iframe>
<iframe class="lazy" data-src="iframes/i03.html" frameborder="0"></iframe>
</div>
<script src="../dist/lazyload.min.js"></script>
<script>
(function () {
function logElementEvent(eventName, element) {
console.log(Date.now(), eventName, element.getAttribute('data-src'));
}

ll = new LazyLoad({
elements_selector: '.lazy',

callback_enter: function (element) {
logElementEvent("ENTERED", element);
},
callback_load: function (element) {
logElementEvent("LOADED", element);
},
callback_set: function (element) {
logElementEvent("SET", element);
},
callback_error: function (element) {
logElementEvent("ERROR", element);
element.src = "https://placeholdit.imgix.net/~text?txtsize=21&txt=Fallback%20image&w=220&h=280";
}
});
}());
</script>
</body>
</html>

</html>
26 changes: 23 additions & 3 deletions demos/video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,29 @@
</div>
<script src="../dist/lazyload.min.js"></script>
<script>
new LazyLoad({
elements_selector: ".lazy"
});
(function () {
function logElementEvent(eventName, element) {
console.log(Date.now(), eventName, element.getAttribute('data-src'));
}

ll = new LazyLoad({
elements_selector: '.lazy',

callback_enter: function (element) {
logElementEvent("ENTERED", element);
},
callback_load: function (element) {
logElementEvent("LOADED", element);
},
callback_set: function (element) {
logElementEvent("SET", element);
},
callback_error: function (element) {
logElementEvent("ERROR", element);
element.src = "https://placeholdit.imgix.net/~text?txtsize=21&txt=Fallback%20image&w=220&h=280";
}
});
}());
</script>
</body>

Expand Down
68 changes: 43 additions & 25 deletions dist/lazyload.amd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,42 +212,60 @@ define(function () {
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};

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

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

var loadString = "load";
var errorString = "error";
var genericLoadEventName = "load";
var mediaLoadEventName = "loadeddata";
var errorEventName = "error";

var removeListeners = function removeListeners(element, loadHandler, errorHandler) {
element.removeEventListener(loadString, loadHandler);
element.removeEventListener(errorString, errorHandler);
var addEventListener = function addEventListener(element, eventName, handler) {
element.addEventListener(eventName, handler);
};

var addOneShotListeners = function addOneShotListeners(element, settings) {
var onLoad = function onLoad(event) {
onEvent(event, true, settings);
removeListeners(element, onLoad, onError);
};
var onError = function onError(event) {
onEvent(event, false, settings);
removeListeners(element, onLoad, onError);
};
element.addEventListener(loadString, onLoad);
element.addEventListener(errorString, onError);
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 onEvent = function onEvent(event, success, settings) {
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, success ? settings.class_loaded : settings.class_error); // Setting loaded or error class
callCallback(success ? settings.callback_load : settings.callback_error, element);
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"];

var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
revealElement(element, settings);
observer.unobserve(element);
Expand Down Expand Up @@ -279,14 +297,14 @@ define(function () {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true
}
callCallback(settings.callback_enter, element);
callbackIfSet(settings.callback_enter, element);
if (managedTags.indexOf(element.tagName) > -1) {
addOneShotListeners(element, settings);
addOneShotEventListeners(element, settings);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setWasProcessedData(element);
callCallback(settings.callback_set, element);
callbackIfSet(settings.callback_set, element);
}

/* entry.isIntersecting needs fallback because is null on some versions of MS Edge, and
Expand Down
Loading

0 comments on commit 0f1f5ee

Please sign in to comment.