Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Allow custom delimiter for background images
  • Loading branch information
alex-bowers committed May 22, 2020
1 parent b36e456 commit e2c9f52
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 11 deletions.
11 changes: 11 additions & 0 deletions README.md
Expand Up @@ -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
Expand Down
11 changes: 8 additions & 3 deletions 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 */

Expand Down Expand Up @@ -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) {
Expand Down
11 changes: 8 additions & 3 deletions 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 */

Expand Down Expand Up @@ -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) {
Expand Down
6 changes: 3 additions & 3 deletions dist/lozad.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 7 additions & 2 deletions src/lozad.js
Expand Up @@ -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) {
Expand Down

0 comments on commit e2c9f52

Please sign in to comment.