Merge branch 'hotfix/15.1.1'

Author: Andrea Verlicchi

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Version 15
 
+#### 15.1.1
+
+Fixed a bug when loading lazy background images on HiDPI screens, `data-bg-hidpi` was mandatory, not it fallbacks to `data-bg`. #430
+
 #### 15.1.0
 
 Lazy background images just gained support for hiDPI ("retina") screens!

README.md

@@ -143,7 +143,7 @@ Please note that the video poster can be lazily loaded too.
 
 ## 👩‍💻 Getting started - Script
 
-The latest, recommended version of LazyLoad is **15.1.0**.
+The latest, recommended version of LazyLoad is **15.1.1**.
 
 Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md).
 
@@ -160,14 +160,14 @@ If you prefer to load a polyfill, the regular LazyLoad behaviour is granted.
 The easiest way to use LazyLoad is to include the script from a CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.min.js"></script>
 ```
 
 Or, with the IntersectionObserver polyfill:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.min.js"></script>
 ```
 
 Then, in your javascript code:
@@ -200,7 +200,7 @@ Include RequireJS:
 Then `require` the AMD version of LazyLoad, like this:
 
 ```js
-var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.amd.min.js";
+var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.amd.min.js";
 var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer-amd.js";
 
 /// Dynamically define the dependencies
@@ -246,7 +246,7 @@ Then include the script.
 ```html
 <script
     async
-    src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.min.js"
+    src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.min.js"
 ></script>
 ```
 
@@ -279,7 +279,7 @@ Then include the script.
 ```html
 <script
     async
-    src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.min.js"
+    src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.min.js"
 ></script>
 ```
 

demos/background_images.html

@@ -40,11 +40,7 @@
                     ></a>
                 </li>
                 <li>
-                    <a
-                        href="#"
-                        data-bg="https://via.placeholder.com/220x280?text=Img+02"
-                        data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+02"
-                    ></a>
+                    <a href="#" data-bg="https://via.placeholder.com/220x280?text=Img+02"></a>
                 </li>
                 <li>
                     <a
@@ -54,11 +50,7 @@
                     ></a>
                 </li>
                 <li>
-                    <a
-                        href="#"
-                        data-bg="https://via.placeholder.com/220x280?text=Img+04"
-                        data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+04"
-                    ></a>
+                    <a href="#" data-bg="https://via.placeholder.com/220x280?text=Img+04"></a>
                 </li>
                 <li>
                     <a
@@ -68,11 +60,7 @@
                     ></a>
                 </li>
                 <li>
-                    <a
-                        href="#"
-                        data-bg="https://via.placeholder.com/220x280?text=Img+06"
-                        data-bg-hidpi="https://via.placeholder.com/440x560?text=Img+06"
-                    ></a>
+                    <a href="#" data-bg="https://via.placeholder.com/220x280?text=Img+06"></a>
                 </li>
                 <li>
                     <a

demos/background_images_multi.html

@@ -43,7 +43,6 @@
                     <a
                         href="#/it/donna/open-toe_cod44740806jx.html"
                         data-bg-multi="url('https://via.placeholder.com/220x280?text=Img+02')"
-                        data-bg-multi-hidpi="url('https://via.placeholder.com/440x560?text=Img+02')"
                     ></a>
                 </li>
                 <li>
@@ -58,7 +57,6 @@
                     <a
                         href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"
                         data-bg-multi="url('https://via.placeholder.com/220x280?text=Img+03')"
-                        data-bg-multi-hidpi="url('https://via.placeholder.com/440x560?text=Img+03')"
                     ></a>
                 </li>
                 <li>
@@ -72,7 +70,6 @@
                     <a
                         href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"
                         data-bg-multi="url('https://via.placeholder.com/220x280?text=Img+05+Left'),url('https://via.placeholder.com/440x560?text=Img+05+Right')"
-                        data-bg-multi-hidpi="url('https://via.placeholder.com/440x560?text=Img+05+Left'),url('https://via.placeholder.com/440x560?text=Img+05+Right')"
                         class="multiple"
                     ></a>
                 </li>
@@ -331,10 +328,9 @@
         <script>
             function logElementEvent(eventName, element) {
                 console.log(Date.now(), eventName, element.getAttribute("data-bg-multi"));
-            -hidpi}
+            }
 
-            var220x280ck_enter = function(element) {
-             callback_enter = function(element) {
+            var callback_enter = function(element) {
                 logElementEvent("🔑 ENTERED", element);
             };
             var callback_exit = function(element) {

dist/lazyload.amd.js

@@ -257,10 +257,12 @@ define(function () { 'use strict';
     safeCallback(settings.callback_reveal, element, instance); // <== DEPRECATED
   };
   var setBackground = function setBackground(element, settings, instance) {
-    var srcDataValue = getData(element, isHiDpi ? settings.data_bg_hidpi : settings.data_bg);
-    if (!srcDataValue) return;
-    element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")");
-    getTempImage(element).setAttribute("src", srcDataValue); // Annotate and notify loading
+    var bg1xValue = getData(element, settings.data_bg);
+    var bgHiDpiValue = getData(element, settings.data_bg_hidpi);
+    var bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;
+    if (!bgDataValue) return;
+    element.style.backgroundImage = "url(\"".concat(bgDataValue, "\")");
+    getTempImage(element).setAttribute("src", bgDataValue); // Annotate and notify loading
 
     increaseLoadingCount(instance);
     addClass(element, settings.class_loading);
@@ -272,7 +274,9 @@ define(function () { 'use strict';
   // COULD BE A GRADIENT BACKGROUND IMAGE
 
   var setMultiBackground = function setMultiBackground(element, settings, instance) {
-    var bgDataValue = getData(element, isHiDpi ? settings.data_bg_multi_hidpi : settings.data_bg_multi);
+    var bg1xValue = getData(element, settings.data_bg_multi);
+    var bgHiDpiValue = getData(element, settings.data_bg_multi_hidpi);
+    var bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;
     if (!bgDataValue) return;
     element.style.backgroundImage = bgDataValue; // Annotate and notify applied