Merge branch 'hotfix/17.8.3'

verlok · Jul 20, 2022 · 088826f · 088826f
2 parents 966071e + aa9f7f9
commit 088826f
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 43 deletions.
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/[email protected].2/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].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/[email protected].2/dist/lazyload.min.js"
+  src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/lazyload.min.js"
 ></script>
 ```
 
@@ -259,7 +259,7 @@ Then include the script.
 ```html
 <script
   async
-  src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/lazyload.min.js"
+  src="https://cdn.jsdelivr.net/npm/[email protected].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",