Allow custom delimiter for background images

ApoorvSaxena · May 22, 2020 · e2c9f52 · e2c9f52
1 parent b36e456
commit e2c9f52
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -180,6 +180,17 @@ for use with responsive background images (image-set)
 </div>
 ```
 
+To change the delimiter that splits background images:
+```html
+<!-- custom delimiter for background images example -->
+<div
+  class="lozad"
+  data-background-image="/first/custom,image,path/image.png-/second/custom,image,path/image.png"
+  data-background-delimiter="-"
+>
+</div>
+```
+
 If you want to load the images before they appear:
 
 ```js

diff --git a/dist/lozad.es.js b/dist/lozad.es.js
@@ -1,4 +1,4 @@
-/*! lozad.js - v1.14.0 - 2020-01-25
+/*! lozad.js - v1.14.0 - 2020-05-22
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
 
@@ -54,10 +54,15 @@ const defaultConfig = {
       element.setAttribute('srcset', element.getAttribute('data-srcset'));
     }
 
+    let backgroundImageDelimiter = ',';
+    if (element.getAttribute('data-background-delimiter')) {
+      backgroundImageDelimiter = element.getAttribute('data-background-delimiter');
+    }
+
     if (element.getAttribute('data-background-image')) {
-      element.style.backgroundImage = `url('${element.getAttribute('data-background-image').split(',').join('\'),url(\'')}')`;
+      element.style.backgroundImage = `url('${element.getAttribute('data-background-image').split(backgroundImageDelimiter).join('\'),url(\'')}')`;
     } else if (element.getAttribute('data-background-image-set')) {
-      const imageSetLinks = element.getAttribute('data-background-image-set').split(',');
+      const imageSetLinks = element.getAttribute('data-background-image-set').split(backgroundImageDelimiter);
       let firstUrlLink = (imageSetLinks[0].substr(0, imageSetLinks[0].indexOf(' ')) || imageSetLinks[0]); // Substring before ... 1x
       firstUrlLink = firstUrlLink.indexOf('url(') === -1 ? `url(${firstUrlLink})` : firstUrlLink;
       if (imageSetLinks.length === 1) {

diff --git a/dist/lozad.js b/dist/lozad.js
@@ -1,4 +1,4 @@
-/*! lozad.js - v1.14.0 - 2020-01-25
+/*! lozad.js - v1.14.0 - 2020-05-22
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
 
@@ -60,10 +60,15 @@
         element.setAttribute('srcset', element.getAttribute('data-srcset'));
       }
 
+      var backgroundImageDelimiter = ',';
+      if (element.getAttribute('data-background-delimiter')) {
+        backgroundImageDelimiter = element.getAttribute('data-background-delimiter');
+      }
+
       if (element.getAttribute('data-background-image')) {
-        element.style.backgroundImage = 'url(\'' + element.getAttribute('data-background-image').split(',').join('\'),url(\'') + '\')';
+        element.style.backgroundImage = 'url(\'' + element.getAttribute('data-background-image').split(backgroundImageDelimiter).join('\'),url(\'') + '\')';
       } else if (element.getAttribute('data-background-image-set')) {
-        var imageSetLinks = element.getAttribute('data-background-image-set').split(',');
+        var imageSetLinks = element.getAttribute('data-background-image-set').split(backgroundImageDelimiter);
         var firstUrlLink = imageSetLinks[0].substr(0, imageSetLinks[0].indexOf(' ')) || imageSetLinks[0]; // Substring before ... 1x
         firstUrlLink = firstUrlLink.indexOf('url(') === -1 ? 'url(' + firstUrlLink + ')' : firstUrlLink;
         if (imageSetLinks.length === 1) {

diff --git a/dist/lozad.min.js b/dist/lozad.min.js
diff --git a/src/lozad.js b/src/lozad.js
@@ -49,10 +49,15 @@ const defaultConfig = {
       element.setAttribute('srcset', element.getAttribute('data-srcset'))
     }
 
+    let backgroundImageDelimiter = ','
+    if (element.getAttribute('data-background-delimiter')) {
+      backgroundImageDelimiter = element.getAttribute('data-background-delimiter')
+    }
+
     if (element.getAttribute('data-background-image')) {
-      element.style.backgroundImage = `url('${element.getAttribute('data-background-image').split(',').join('\'),url(\'')}')`
+      element.style.backgroundImage = `url('${element.getAttribute('data-background-image').split(backgroundImageDelimiter).join('\'),url(\'')}')`
     } else if (element.getAttribute('data-background-image-set')) {
-      const imageSetLinks = element.getAttribute('data-background-image-set').split(',')
+      const imageSetLinks = element.getAttribute('data-background-image-set').split(backgroundImageDelimiter)
       let firstUrlLink = (imageSetLinks[0].substr(0, imageSetLinks[0].indexOf(' ')) || imageSetLinks[0]) // Substring before ... 1x
       firstUrlLink = firstUrlLink.indexOf('url(') === -1 ? `url(${firstUrlLink})` : firstUrlLink
       if (imageSetLinks.length === 1) {