extend bgset plugin to support art direction (see #47)

lazysizes.js

@@ -303,49 +303,45 @@
 				srcset = elem.getAttribute(lazySizesConfig.srcsetAttr);
 				src = elem.getAttribute(lazySizesConfig.srcAttr);
 
-				firesLoad = event.details.firesLoad || (('src' in elem) && (srcset || src));
+				if(isImg) {
+					parent = elem.parentNode;
+					isPicture = regPicture.test(parent.nodeName || '');
+				}
+
+				firesLoad = event.details.firesLoad || (('src' in elem) && (srcset || src || isPicture));
 
 				if(firesLoad){
 					isLoading++;
 					addRemoveLoadEvents(elem, resetPreloading, true);
 					clearTimeout(resetPreloadingTimer);
 					resetPreloadingTimer = setTimeout(resetPreloading, 3000);
-
-					if(isImg) {
-						parent = elem.parentNode;
-						isPicture = regPicture.test(parent.nodeName || '');
-					}
 				}
 
-				if(srcset || src){
-
-					if(isPicture){
-						sources = parent.getElementsByTagName('source');
-						for(i = 0, len = sources.length; i < len; i++){
-							if( (customMedia = lazySizesConfig.customMedia[sources[i].getAttribute('media')]) ){
-								sources[i].setAttribute('media', customMedia);
-							}
-							sourceSrcset = sources[i].getAttribute(lazySizesConfig.srcsetAttr);
-							if(sourceSrcset){
-								sources[i].setAttribute('srcset', sourceSrcset);
-							}
+				if(isPicture){
+					sources = parent.getElementsByTagName('source');
+					for(i = 0, len = sources.length; i < len; i++){
+						if( (customMedia = lazySizesConfig.customMedia[sources[i].getAttribute('media')]) ){
+							sources[i].setAttribute('media', customMedia);
+						}
+						sourceSrcset = sources[i].getAttribute(lazySizesConfig.srcsetAttr);
+						if(sourceSrcset){
+							sources[i].setAttribute('srcset', sourceSrcset);
 						}
 					}
+				}
 
-					if(srcset){
-
-						elem.setAttribute('srcset', srcset);
+				if(srcset){
+					elem.setAttribute('srcset', srcset);
 
-						if(fixChrome && sizes){
-							elem.removeAttribute('src');
-						}
+					if(fixChrome && sizes){
+						elem.removeAttribute('src');
+					}
 
-					} else if(src){
-						if(regIframe.test(elem.nodeName)){
-							changeIframeSrc(elem, src);
-						} else {
-							elem.setAttribute('src', src);
-						}
+				} else if(src){
+					if(regIframe.test(elem.nodeName)){
+						changeIframeSrc(elem, src);
+					} else {
+						elem.setAttribute('src', src);
 					}
 				}
 

plugins/bgset/README.md

@@ -1,6 +1,6 @@
 #lazysizes bgset extension
 
-This simple and small plugin allows you to define multiple background images with a width descriptor, similar to how ``img[srcset]`` works.
+This simple and small plugin allows you to define multiple background images with a width descriptor, similar to how ``img[srcset]`` works as also art directed images using media queries.
 
 The extension will then load the best image size for the current viewport and device. In case the browser does not support responsive images natively either picturefill or respimage has to be used:
 
@@ -18,9 +18,33 @@ The extension will then load the best image size for the current viewport and de
 <script src="ls.bgset.min.js"></script>
 <script src="lazysizes.min.js"></script>
 
-<div class="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w">
+<div class="lazyload" data-bgset="image-200.jpg 200w, image-300.jpg 300w, image-400.jpg 400w" data-sizes="auto">
 
 </div>
 ```
 
+To use this feature each set has to be separated using the ``" | "`` signs and the media query has to be added after the set inside of square bracket.
+
+Also the ``customMedia`` can be optionally used to separate the media queries implementation from the markup.
+
+```html
+<script>
+window.lazySizesConfig = window.lazySizesConfig || {};
+window.lazySizesConfig.customMedia = {
+    '--small': '(max-width: 480px)',
+    '--medium': '(max-width: 700px)'
+};
+</script>
+
+<div class="lazyload" data-bgset="image-200.jpg [--small] | image-300.jpg [--medium] | image-400.jpg"></div>
+```
+
+Of course also resolution switching and art direction can be combined:
+
+```html
+<div class="lazyload" data-bgset="image1-200.jpg 200w, image2-400.jpg 400w [(max-width: 480px)] |
+    image2-300.jpg 300w, image2-600.jpg 600w [(max-width: 700px)] |
+    image-400.jpg 400w, image-800.jpg 800w" data-sizes="auto"></div>
+```
+
 Here you find a [small bgset demo](http://jsfiddle.net/trixta/bfqqnosp/embedded/result/).

plugins/bgset/ls.bgset.js

@@ -2,22 +2,71 @@
 	'use strict';
 	if(!window.addEventListener){return;}
 
-	var proxyWidth = function(elem, image){
+	var regSplitSet = /\s*\|\s+|\s+\|\s*/g;
+	var regSource = /^(.+?)(?:\s+\[\s*(.+?)\s*\])?$/;
+
+	var proxyWidth = function(elem){
 		var width = lazySizes.gW(elem, elem.parentNode);
 		if(!elem._lazysizesWidth || width > elem._lazysizesWidth){
-			image.setAttribute('sizes',  width+'px');
 			elem._lazysizesWidth = width;
 		}
 		return elem._lazysizesWidth;
 	};
 
+	var createPicture = function(sets, elem, img){
+		var picture = document.createElement('picture');
+		var sizes = elem.getAttribute(lazySizesConfig.sizesAttr);
+
+		sets = sets.split(regSplitSet);
+
+		picture.style.display = 'none';
+		img.className = lazySizesConfig.lazyClass;
+
+		if(sets.length == 1 && !sizes){
+			sizes = 'auto';
+		}
+
+		sets.forEach(function(set){
+			var source = document.createElement('source');
+
+			if(sizes && sizes != 'auto'){
+				source.setAttribute('sizes', sizes);
+			}
+
+			if(set.match(regSource)){
+				source.setAttribute(lazySizesConfig.srcsetAttr, RegExp.$1);
+				if(RegExp.$2){
+					source.setAttribute('media', RegExp.$2);
+				}
+			}
+			picture.appendChild(source);
+		});
+
+		if(sizes){
+			img.setAttribute(lazySizesConfig.sizesAttr, sizes);
+			if(sizes == 'auto'){
+				Object.defineProperty(img, '_lazybgset', {
+					value: elem,
+					writable: true
+				});
+			}
+		}
+
+		picture.appendChild(img);
+
+		elem.appendChild(picture);
+
+		elem.removeAttribute(lazySizesConfig.sizesAttr);
+
+	};
+
 	addEventListener('lazybeforeunveil', function(e){
 		var set, image, load, init, elem;
 
 		if(e.defaultPrevented || !(set = e.target.getAttribute('data-bgset'))){return;}
-		image = document.createElement('img');
+
 		elem = e.target;
-		proxyWidth(elem, image);
+		image = document.createElement('img');
 
 		load = function(evt){
 			var bg = evt.type == 'load' ? image.currentSrc || image.src : false;
@@ -40,22 +89,13 @@
 		image.addEventListener('load', load);
 		image.addEventListener('error', load);
 
-		image.setAttribute('srcset', set);
-		image.style.display = 'none';
-		image.className = lazySizes.cfg.autosizesClass;
-
-		Object.defineProperty(image, '_lazybgset', {
-			value: elem,
-			writable: true
-		});
-
-		elem.appendChild(image);
+		createPicture(set, elem, image);
 
-		lazySizes.uP(image);
+		lazySizes.loader.unveil(image);
 	});
 
 	addEventListener('lazybeforesizes', function(e){
 		if(e.defaultPrevented || !e.target._lazybgset){return;}
-		e.details.width = proxyWidth(e.target._lazybgset, e.target);
+		e.details.width = proxyWidth(e.target._lazybgset);
 	});
 })();