Merge branch 'hotfix/17.8.3'

verlok-cn · verlok-cn · commit 088826f926df · 2022-07-20T22:27:52.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Version 17
 
+#### 17.8.3
+
+- Fixed `callback_error` in background images demos, like suggested in #573. Thanks to @Soul244.
+
 #### 17.8.2
 
 - Fixed a bug which occurred if the network connection went off and on again after a LazyLoad instance was destroyed
diff --git a/README.md b/README.md
@@ -175,7 +175,7 @@ Please note that the video poster can be lazily loaded too.
 
 ## 👩‍💻 Getting started - Script
 
-The latest, recommended version of LazyLoad is **17.8.2**.
+The latest, recommended version of LazyLoad is **17.8.3**.
 
 Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md).
 
@@ -184,7 +184,7 @@ Quickly understand how to upgrade from a previous version reading the [practical
 The easiest way to use LazyLoad is to include the script from a CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.2/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
 ```
 
 Then, in your javascript code:
@@ -225,7 +225,7 @@ Then include the script.
 ```html
 <script
   async
-  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.2/dist/lazyload.min.js"
+  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"
 ></script>
 ```
 
@@ -259,7 +259,7 @@ Then include the script.
 ```html
 <script
   async
-  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.2/dist/lazyload.min.js"
+  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"
 ></script>
 ```
 
diff --git a/demos/background_images.html b/demos/background_images.html
@@ -2,9 +2,7 @@
 <html>
   <head lang="en">
     <meta charset="UTF-8" />
-    <title>
-      Background images - Lazyload demos
-    </title>
+    <title>Background images - Lazyload demos</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
       ul,
@@ -42,11 +40,7 @@ <h1>Background images demo</h1>
           ></a>
         </li>
         <li>
-          <a
-            class="lazy"
-            href="#"
-            data-bg="https://via.placeholder.com/220x280?text=Img+02"
-          ></a>
+          <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+02"></a>
         </li>
         <li>
           <a
@@ -57,11 +51,7 @@ <h1>Background images demo</h1>
           ></a>
         </li>
         <li>
-          <a
-            class="lazy"
-            href="#"
-            data-bg="https://via.placeholder.com/220x280?text=Img+04"
-          ></a>
+          <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+04"></a>
         </li>
         <li>
           <a
@@ -72,11 +62,7 @@ <h1>Background images demo</h1>
           ></a>
         </li>
         <li>
-          <a
-            class="lazy"
-            href="#"
-            data-bg="https://via.placeholder.com/220x280?text=Img+06"
-          ></a>
+          <a class="lazy" href="#" data-bg="https://via.placeholder.com/220x280?text=Img+06"></a>
         </li>
         <li>
           <a
@@ -347,11 +333,7 @@ <h1>Background images demo</h1>
     <script src="../dist/lazyload.min.js"></script>
     <script>
       function logElementEvent(eventName, element) {
-        console.log(
-          Date.now(),
-          eventName,
-          element.getAttribute("data-bg88da112-bg-hidpi=bg")
-        );
+        console.log(Date.now(), eventName, element.getAttribute("data-bg88da112-bg-hidpi=bg"));
       }
 
       var callback_enter = function (element) {
@@ -368,8 +350,8 @@ <h1>Background images demo</h1>
       };
       var callback_error = function (element) {
         logElementEvent("💀 ERROR", element);
-        element.src =
-          "https://via.placeholder.com/220x280/?text=Error+Placeholder";
+        element.style.backgroundImage =
+          "url('https://via.placeholder.com/440x560/?text=Error+Placeholder')";
       };
       var callback_finish = function () {
         logElementEvent("✔️ FINISHED", document.documentElement);
diff --git a/demos/background_images_image-set.html b/demos/background_images_image-set.html
@@ -52,20 +52,20 @@ <h1>Background images with <q>image-set</q> demo</h1>
             href="#"
             style="
               background-image: -webkit-image-set(
-                url('https://via.placeholder.com/220x280?text=Img+02+Left') 1x,
-                url('https://via.placeholder.com/440x560?text=Img+02+Left') 2x
-              ), -webkit-image-set(
+                  url('https://via.placeholder.com/220x280?text=Img+02+Left') 1x,
+                  url('https://via.placeholder.com/440x560?text=Img+02+Left') 2x
+                  ), -webkit-image-set(
                 url('https://via.placeholder.com/220x280?text=Img+02+Right') 1x, 
                 url('https://via.placeholder.com/440x560?text=Img+02+Right') 2x
               );
               background-image: image-set(
-                url('https://via.placeholder.com/220x280?text=Img+02+Left') 1x,
-                url('https://via.placeholder.com/440x560?text=Img+02+Left') 2x
-              ),
-              image-set(
-                url('https://via.placeholder.com/220x280?text=Img+02+Right') 1x,
-                url('https://via.placeholder.com/440x560?text=Img+02+Right') 2x
-              );
+                  url('https://via.placeholder.com/220x280?text=Img+02+Left') 1x,
+                  url('https://via.placeholder.com/440x560?text=Img+02+Left') 2x
+                ),
+                image-set(
+                  url('https://via.placeholder.com/220x280?text=Img+02+Right') 1x,
+                  url('https://via.placeholder.com/440x560?text=Img+02+Right') 2x
+                );
             "
           ></a>
         </li>
@@ -353,7 +353,8 @@ <h1>Background images with <q>image-set</q> demo</h1>
       };
       var callback_error = function (element) {
         logElementEvent("💀 ERROR", element);
-        element.src = "https://via.placeholder.com/220x280/?text=Error+Placeholder";
+        element.style.backgroundImage =
+          "url('https://via.placeholder.com/440x560/?text=Error+Placeholder')";
       };
       var callback_finish = function () {
         logElementEvent("✔️ FINISHED", document.documentElement);
diff --git a/demos/background_images_multi.html b/demos/background_images_multi.html
@@ -392,8 +392,8 @@ <h1>Multiple background images demo</h1>
       };
       var callback_error = function (element) {
         logElementEvent("💀 ERROR", element);
-        element.src =
-          "https://via.placeholder.com/440x560/?text=Error+Placeholder";
+        element.style.backgroundImage =
+          "url('https://via.placeholder.com/440x560/?text=Error+Placeholder')";
       };
       var callback_finish = function () {
         logElementEvent("✔️ FINISHED", document.documentElement);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-lazyload",
-  "version": "17.8.2",
+  "version": "17.8.3",
   "description": "LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain \"vanilla\" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading.",
   "main": "dist/lazyload.min.js",
   "module": "dist/lazyload.esm.js",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vanilla-lazyload",`
`3`		`- "version": "17.8.2",`
	`3`	`+ "version": "17.8.3",`
`4`	`4`	`"description": "LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain \"vanilla\" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading.",`
`5`	`5`	`"main": "dist/lazyload.min.js",`
`6`	`6`	`"module": "dist/lazyload.esm.js",`