Merge branch 'master' of https://github.com/verlok/lazyload

CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+## Version 17
+
+#### 17.0.0
+
+- The `elements_selector` option now defaults to  `.lazy` (was `img`)
+- The `cancel_on_exit` option now defaults to `true` (was `false`)
+
+See [UPGRADE.md](UPGRADE.md) to understand **if** you are impacted by any breaking change and **how** to upgrade from previous versions.
+
+---
+
+**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**
+
+---
+
 ## Version 16
 
 #### 16.1.0

UPGRADE.md

@@ -1,5 +1,46 @@
 # 🗺 HOW TO UPDATE FROM PREVIOUS VERSIONS
 
+## Version 16 to 17
+
+**If you were NOT setting the `elements_selector` option**
+
+You should add the `lazy` class to your lazy images.
+
+```html
+<!-- FROM -->
+<img data-src="lazyImage.jpg" alt="Lazy image" />
+<!-- TO -->
+<img class="lazy" data-src="lazyImage.jpg" alt="Lazy image" />
+```
+
+**ALTERNATIVELY**, you could set the `elements_selector` option to `"img"`
+
+```js
+const myLazyLoad = new LazyLoad({
+  /* other options here */
+  elements_selector: "img" // ADD THIS OPTION
+});
+```
+
+
+**If you were using `cancel_on_exit: true`**
+
+```js
+// From
+const myLazyLoad = new LazyLoad({
+  /* other options here */
+  cancel_on_exit: true // REMOVE THIS OPTION
+});
+```
+
+You should remove `cancel_on_exit: true` from the settings.
+
+---
+
+**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**
+
+---
+
 ## Version 15 to 16
 
 **If you were using the `callback_reveal` callback**
@@ -11,11 +52,15 @@ You should replace `callback_reveal` with `callback_loading` in your JS code.
 You should replace the `load(element)` with `LazyLoad.load(element, settings)`
 
 ```js
-const myLazyLoad = new LazyLoad({/* settings */});
+const myLazyLoad = new LazyLoad({
+  /* options here */
+});
 // FROM
 myLazyLoad.load(element);
 // TO
-LazyLoad.load(element, {/* settings */});
+LazyLoad.load(element, {
+  /* options here */
+});
 ```
 
 Note that the settings object of the `load` method can be different. If none are provided, the default options will apply.
@@ -26,10 +71,10 @@ You should replace `auto_unobserve` with `unobserve_completed`.
 
 ```js
 const myLazyLoad = new LazyLoad({
-   // FROM
-   auto_unobserve: false,
-   // TO
-   unobserve_completed: false,
+  // FROM
+  auto_unobserve: false,
+  // TO
+  unobserve_completed: false
 });
 ```
 
@@ -39,10 +84,10 @@ You should change `load_delay: ___` with `cancel_on_exit: true`.
 
 ```js
 const myLazyLoad = new LazyLoad({
-   // FROM
-   load_delay: 300,
-   // TO
-   cancel_on_exit: true,
+  // FROM
+  load_delay: 300,
+  // TO
+  cancel_on_exit: true
 });
 ```
 
@@ -65,10 +110,13 @@ You should replace `data-src` with `data-bg` in your markup/DOM
 <div data-bg="background.jpg">...</div>
 ```
 
-Alternatively, you could pass `src` in the `data_bg` option
+**ALTERNATIVELY**, you could pass `src` in the `data_bg` option
 
 ```js
-new LazyLoad({ /* other options? */ data_bg: "src" });
+new LazyLoad({
+  /* other options here */
+  data_bg: "src"
+});
 ```
 
 **If you have single background images loaded via `data-bg`**

currentFeature.md

@@ -1 +1 @@
-# Current feature:
+# Current feature:

demos/amd.html

@@ -470,7 +470,6 @@ <h1>AMD version demo</h1>
 
             require(["../dist/lazyload.amd.min.js"], function (LazyLoad) {
                 window.ll = new LazyLoad({
-                    elements_selector: ".lazy",
                     // Assign the callbacks defined above
                     callback_enter: callback_enter,
                     callback_exit: callback_exit,

demos/amd_polyfill.html

@@ -478,7 +478,6 @@ <h1>AMD Polyfill demo</h1>
 
             require(dependencies, function (_, LazyLoad) {
                 window.ll = new LazyLoad({
-                    elements_selector: ".lazy",
                     // Assign the callbacks defined above
                     callback_enter: callback_enter,
                     callback_exit: callback_exit,