Releasing v2.0.2 - added support for src attribute

verlok · Mar 17, 2014 · e7226a9 · e7226a9
1 parent b3020ec
commit e7226a9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 19 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "picturePolyfill",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "main": "picturePolyfill.js",
   "ignore": [
     ".idea",

diff --git a/index.html b/index.html
@@ -19,8 +19,8 @@
 <body>
 	<div id="container">
 
-		<h1>Responsive images using <a href="https://github.com/verlok/picturePolyfill">PicturePolyfill</a> - Demo</h1>
-		<p>The following link contains two <strong>responsive images</strong> created using a real <code>&lt;picture&gt;</code> element, and the <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> script.</p>
+		<h1>Responsive images using <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> - Demo</h1>
+		<p>The following link contains some <strong>responsive images</strong> created using a real <code>&lt;picture&gt;</code> element, and the <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> script.</p>
 
 		<div class="cf">
 			<div class="element">
@@ -38,10 +38,10 @@ <h3>With HD (Retina) display support</h3>
 			<div class="element">
 				<h3>Without HD (Retina) display support</h3>
 				<picture data-alt="A beautiful responsive image" data-default-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440">
-					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480"/>
-					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512" media="(min-width: 481px)"/>
-					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720" media="(min-width: 1025px)"/>
-					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960" media="(min-width: 1441px)"/>
+					<source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480"/>
+					<source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512" media="(min-width: 481px)"/>
+					<source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720" media="(min-width: 1025px)"/>
+					<source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960" media="(min-width: 1441px)"/>
 					<noscript>
 						<img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440" alt="A beautiful responsive image"/>
 					</noscript>
@@ -67,10 +67,10 @@ <h3>With HD (Retina) display support</h3>
 			<div class="element">
 				<h3>Without HD (Retina) display support</h3>
 				<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif">
-					<source srcset="img/480x480.gif"/>
-					<source srcset="img/768x768.gif" media="(min-width: 481px)"/>
-					<source srcset="img/1440x1440.gif" media="(min-width: 1025px)"/>
-					<source srcset="img/1920x1920.gif" media="(min-width: 1441px)"/>
+					<source src="img/480x480.gif"/>
+					<source src="img/768x768.gif" media="(min-width: 481px)"/>
+					<source src="img/1440x1440.gif" media="(min-width: 1025px)"/>
+					<source src="img/1920x1920.gif" media="(min-width: 1441px)"/>
 					<noscript>
 						<img src="img/768x768.gif" alt="A beautiful responsive image"/>
 					</noscript>

diff --git a/picturePolyfill.js b/picturePolyfill.js
@@ -99,13 +99,14 @@
 	 * @returns {string}
 	 */
 	function getSrcAttributeFromSourcesData(sourcesData) {
-		var media,
-			matchedSrc;
+		var matchedSrc;
 
 		for (var i=0, len=sourcesData.length; i<len; i+=1) {
-			media = sourcesData[i].media;
+			var sourceData = sourcesData[i],
+				media = sourceData.media,
+				srcset = sourceData.srcset;
 			if (!media || w.matchMedia(media).matches) {
-				matchedSrc = getSrcFromSrcsetArray(sourcesData[i].srcset, pixelRatio);
+				matchedSrc = srcset ? getSrcFromSrcsetArray(srcset, pixelRatio) : sourceData.src;
 			}
 		}
 		return matchedSrc;
@@ -151,11 +152,12 @@
 			foundSources = pictureElement.getElementsByTagName('source');
 
 		for (var i=0, len = foundSources.length; i<len; i+=1) {
-			var sourceElement = foundSources[i];
+			var sourceElement = foundSources[i],
+				srcset = sourceElement.getAttribute('srcset');
 			sourcesData.push({
 				'media': sourceElement.getAttribute('media'),
 				'src': sourceElement.getAttribute('src'),
-				'srcset': getSrcsetHash(sourceElement.getAttribute('srcset'))
+				'srcset': srcset ? getSrcsetHash(srcset) : null
 			});
 		}
 		return sourcesData;

diff --git a/picturePolyfill.min.js b/picturePolyfill.min.js