Skip to content

Commit

Permalink
Merge branch 'release/10.12.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrea Verlicchi committed Jul 30, 2018
2 parents 46cc7ba + d98e668 commit eab2401
Show file tree
Hide file tree
Showing 9 changed files with 107 additions and 97 deletions.
4 changes: 4 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.12.0

SEO! Expanded SEO-friendliness to more crawlers, Bingbot included.

#### 10.11.1

**BUGFIX**: Fixed issue #225. Due to mistyped BOT detection, in version 10.11.0 all images were loaded as soon as `LazyLoad` was created.
Expand Down
52 changes: 26 additions & 26 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Starting from version 9, LazyLoad uses the IntersectionObserver API, which is no
To include the [latest version](https://cdnjs.com/libraries/vanilla-lazyload) of LazyLoad, use the following script:

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

### Advanced and best option: conditionally load version 8 or 10
Expand All @@ -32,7 +32,7 @@ You can do it with the following script:
(function(w, d){
var b = d.getElementsByTagName('body')[0];
var s = d.createElement("script"); s.async = true;
var v = !("IntersectionObserver" in w) ? "8.11.0" : "10.11.1";
var v = !("IntersectionObserver" in w) ? "8.11.0" : "10.12.0";
s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.
b.appendChild(s);
Expand Down Expand Up @@ -532,10 +532,10 @@ img[data-srcset] {

The `new LazyLoad()` instruction you execute on your page can take 2 parameters

| Required | What to pass | Type | Default value |
| -------- | ----------------------------------------------- | ------- | ------------- |
| No | The option object for this instance of LazyLoad | Plain Object | `{}` |
| No | A NodeSet of elements to execute LazyLoad on | NodeSet | `null` |
| Required | What to pass | Type | Default value |
| -------- | ----------------------------------------------- | ------------ | ------------- |
| No | The option object for this instance of LazyLoad | Plain Object | `{}` |
| No | A NodeSet of elements to execute LazyLoad on | NodeSet | `null` |

The most common usage of LazyLoad constructor is to pass only the options object (see "options" in the next section). For example:

Expand All @@ -557,32 +557,32 @@ var aLazyLoad = new LazyLoad(lazyLoadOptions, elementsToLazyLoad);
For every instance of _LazyLoad_ you can pass in some options, to alter its default behaviour.
Here's the list of the options.

| Name | Meaning | Default value |
| ---- | ----| ---- |
| `container` | The scrolling container, and the container of the elements in the `elements_selector` option. | `document` |
| `elements_selector` | The string selector of the elements to load lazily, to be selected as descendants of the `container` object. For multiple elements, you can add the css selectors for the same followed by a comma. E.g.: `'iframe, img, .container_class'`. This will lazy load images for iframe and img elements along with the images/background images under `'container_class'` | `"img"` |
| `threshold` | The distance out of the viewport, expressed in pixel, before which to start loading the images | `300` |
| `data_src` | The name of the data attribute containing the original image source, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"` | `"src"` |
| `data_srcset` | The name of the data attribute containing the original image source set in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-original-set"`, just pass `"original-set"` | `"srcset"` |
| `data_sizes` | The name of the data attribute containing the sizes attribute to use, excluding the `"data-"` part. E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"` | `"sizes"` |
| `class_loading` | The class applied to the elements while the loading is in progress. | `"loading"` |
| `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"` |
| `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` |
| `callback_error` | A function to be called when an element triggers an error. | `null` |
| Name | Meaning | Default value |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `container` | The scrolling container, and the container of the elements in the `elements_selector` option. | `document` |
| `elements_selector` | The string selector of the elements to load lazily, to be selected as descendants of the `container` object. For multiple elements, you can add the css selectors for the same followed by a comma. E.g.: `'iframe, img, .container_class'`. This will lazy load images for iframe and img elements along with the images/background images under `'container_class'` | `"img"` |
| `threshold` | The distance out of the viewport, expressed in pixel, before which to start loading the images | `300` |
| `data_src` | The name of the data attribute containing the original image source, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"` | `"src"` |
| `data_srcset` | The name of the data attribute containing the original image source set in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-original-set"`, just pass `"original-set"` | `"srcset"` |
| `data_sizes` | The name of the data attribute containing the sizes attribute to use, excluding the `"data-"` part. E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"` | `"sizes"` |
| `class_loading` | The class applied to the elements while the loading is in progress. | `"loading"` |
| `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"` |
| `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` |
| `callback_error` | A function to be called when an element triggers an error. | `null` |

### Methods

You can call the following public methods on any instance of LazyLoad.

| Method name | Effect |
|------------------|-------------------------------------------------------------------------------------------------------|
| `update()` | Make LazyLoad to check for new lazy images in the container, using the `elements_selector` option. |
| `loadAll()` | Loads all the lazy images right away, no matter if they are inside or outside the viewport. |
| Method name | Effect |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `update()` | Make LazyLoad to check for new lazy images in the container, using the `elements_selector` option. |
| `loadAll()` | Loads all the lazy images right away, no matter if they are inside or outside the viewport. |
| `load(element, force)` | Immediately loads any lazy `element`, even if it isn't selectable by the `elements_selector` option. Note that this method works only once on a specific `element`, unless you force it passing `true` as second parameter. |
| `destroy()` | Destroys the instance, unsetting instance variables and removing listeners. |
| `destroy()` | Destroys the instance, unsetting instance variables and removing listeners. |

## Notable features

Expand Down
64 changes: 33 additions & 31 deletions dist/lazyload.es2015.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,34 +47,36 @@ function purgeElements(elements) {
}

/* Creates instance and notifies it through the window element */
const createInstance = function (classObj, options) {
var event;
let eventString = "LazyLoad::Initialized";
let instance = new classObj(options);
try {
// Works in modern browsers
event = new CustomEvent(eventString, { detail: { instance } });
}
catch(err) {
// Works in Internet Explorer (all versions)
event = document.createEvent("CustomEvent");
event.initCustomEvent(eventString, false, false, { instance });
}
window.dispatchEvent(event);
const createInstance = function(classObj, options) {
var event;
let eventString = "LazyLoad::Initialized";
let instance = new classObj(options);
try {
// Works in modern browsers
event = new CustomEvent(eventString, { detail: { instance } });
} catch (err) {
// Works in Internet Explorer (all versions)
event = document.createEvent("CustomEvent");
event.initCustomEvent(eventString, false, false, { instance });
}
window.dispatchEvent(event);
};

/* Auto initialization of one or more instances of lazyload, depending on the
options passed in (plain object or an array) */
function autoInitialize (classObj, options) {
if (!options.length) {
// Plain object
createInstance(classObj, options);
} else {
// Array of objects
for (let i = 0, optionsItem; optionsItem = options[i]; i += 1) {
createInstance(classObj, optionsItem);
}
}
function autoInitialize(classObj, options) {
if (!options) {
return;
}
if (!options.length) {
// Plain object
createInstance(classObj, options);
} else {
// Array of objects
for (let i = 0, optionsItem; (optionsItem = options[i]); i += 1) {
createInstance(classObj, optionsItem);
}
}
}

const setSourcesInChildren = function(
Expand Down Expand Up @@ -133,11 +135,12 @@ const setSources = function(element, settings) {
}
};

const isBot =
!("onscroll" in window) || /glebot/.test(navigator.userAgent);

const runningOnBrowser = typeof window !== "undefined";

const isBot =
(runningOnBrowser && !("onscroll" in window)) ||
/glebot|bingbot|crawler|spider|robot|crawling/i.test(navigator.userAgent);

const supportsIntersectionObserver =
runningOnBrowser && "IntersectionObserver" in window;

Expand Down Expand Up @@ -292,10 +295,9 @@ LazyLoad.prototype = {
}
};

/* Automatic instances creation if required (useful for async script loading!) */
let autoInitOptions = window.lazyLoadOptions;
if (runningOnBrowser && autoInitOptions) {
autoInitialize(LazyLoad, autoInitOptions);
/* Automatic instances creation if required (useful for async script loading) */
if (runningOnBrowser) {
autoInitialize(LazyLoad, window.lazyLoadOptions);
}

return LazyLoad;
Expand Down
14 changes: 8 additions & 6 deletions dist/lazyload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
/* Auto initialization of one or more instances of lazyload, depending on the
options passed in (plain object or an array) */
function autoInitialize(classObj, options) {
if (!options) {
return;
}
if (!options.length) {
// Plain object
createInstance(classObj, options);
Expand Down Expand Up @@ -135,10 +138,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
}
};

var isBot = !("onscroll" in window) || /glebot/.test(navigator.userAgent);

var runningOnBrowser = typeof window !== "undefined";

var isBot = runningOnBrowser && !("onscroll" in window) || /glebot|bingbot|crawler|spider|robot|crawling/i.test(navigator.userAgent);

var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;

var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
Expand Down Expand Up @@ -291,10 +294,9 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
}
};

/* Automatic instances creation if required (useful for async script loading!) */
var autoInitOptions = window.lazyLoadOptions;
if (runningOnBrowser && autoInitOptions) {
autoInitialize(LazyLoad, autoInitOptions);
/* Automatic instances creation if required (useful for async script loading) */
if (runningOnBrowser) {
autoInitialize(LazyLoad, window.lazyLoadOptions);
}

return LazyLoad;
Expand Down
Loading

0 comments on commit eab2401

Please sign in to comment.