Merge pull request #629 from scottjehl/intrinsic-dimension

clarify the use of the intrinsic dimension plugin
scottjehl · Feb 2, 2016 · b6e51e6 · b6e51e6
2 parents 564cad6 + d6a3b8a
commit b6e51e6
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 40 deletions.
diff --git a/examples/demo-01.html b/examples/demo-01.html
@@ -8,11 +8,8 @@
 
 		<link href='../examples/styles.css' rel='stylesheet' type='text/css'>
 		<link href="https://raw.githubusercontent.com/ResponsiveImagesCG/responsiveimages.org/master/img/favicon.ico" rel="icon">
-		<script>
-			// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
-			document.createElement( "picture" );
-		</script>
-		<script async="true" src="../dist/picturefill.js"></script>
+		<script async="" src="../dist/plugins/intrinsic-dimension/pf.intrinsic.min.js"></script>
+		<script async="" src="../dist/picturefill.min.js"></script>
 	</head>
 	<body>
 		<main>
@@ -21,11 +18,11 @@ <h1 class="hed">Picturefill</h1>
 			<span class="ricg-seal">Officially endorsed by the <abbr title="Responsive Issues Community Group">RICG</abbr></span>
 
 		<h2 class="hed-pattern">An img with <code>srcset</code> and <code>sizes</code> attributes</h2>
-<pre><code>&lt;img 
+<pre><code>&lt;img
 sizes=&quot;(min-width: 40em) 80vw, 100vw&quot;
-srcset=&quot;examples/images/medium.jpg 375w, 
+srcset=&quot;examples/images/medium.jpg 375w,
         examples/images/large.jpg 480w,
-        examples/images/extralarge.jpg 768w&quot; 
+        examples/images/extralarge.jpg 768w&quot;
 alt=&quot;…&quot;&gt;</code></pre>
 
 		<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>
@@ -34,4 +31,4 @@ <h2 class="hed-pattern">An img with <code>srcset</code> and <code>sizes</code> a
 				srcset="../examples/images/small.jpg 375w, ../examples/images/large.jpg 480w, ../examples/images/extralarge.jpg 768w" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
 		</main>
 	</body>
-</html>
+</html>
diff --git a/examples/demo-02.html b/examples/demo-02.html
@@ -8,11 +8,8 @@
 
 		<link href='../examples/styles.css' rel='stylesheet' type='text/css'>
 		<link href="https://raw.githubusercontent.com/ResponsiveImagesCG/responsiveimages.org/master/img/favicon.ico" rel="icon">
-		<script>
-			// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
-			document.createElement( "picture" );
-		</script>
-		<script async="true" src="../dist/picturefill.js"></script>
+		<script async="" src="../dist/plugins/intrinsic-dimension/pf.intrinsic.min.js"></script>
+		<script async="" src="../dist/picturefill.min.js"></script>
 	</head>
 	<body>
 

diff --git a/examples/demo-03.html b/examples/demo-03.html
@@ -8,11 +8,8 @@
 
 		<link href='../examples/styles.css' rel='stylesheet' type='text/css'>
 		<link href="https://raw.githubusercontent.com/ResponsiveImagesCG/responsiveimages.org/master/img/favicon.ico" rel="icon">
-		<script>
-			// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
-			document.createElement( "picture" );
-		</script>
-		<script async="true" src="../dist/picturefill.js"></script>
+		<script async="" src="../dist/plugins/intrinsic-dimension/pf.intrinsic.min.js"></script>
+		<script async="" src="../dist/picturefill.min.js"></script>
 	</head>
 	<body>
 

diff --git a/examples/demo-04.html b/examples/demo-04.html
@@ -8,11 +8,8 @@
 
 		<link href='../examples/styles.css' rel='stylesheet' type='text/css'>
 		<link href="https://raw.githubusercontent.com/ResponsiveImagesCG/responsiveimages.org/master/img/favicon.ico" rel="icon">
-		<script>
-			// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
-			document.createElement( "picture" );
-		</script>
-		<script src="../dist/picturefill.js"></script>
+		<script async="" src="../dist/plugins/intrinsic-dimension/pf.intrinsic.min.js"></script>
+		<script async="" src="../dist/picturefill.min.js"></script>
 
 	</head>
 	<body>
@@ -46,4 +43,4 @@ <h2 class="hed-pattern"><code>media</code> example with one webp source qualifie
 		</main>
 
 	</body>
-</html>
+</html>
diff --git a/examples/demo-05.html b/examples/demo-05.html
@@ -8,13 +8,8 @@
 		<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
 		<link href='../examples/styles.css' rel='stylesheet' type='text/css'>
 
-		<script>
-			// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
-			document.createElement( "picture" );
-		</script>
-		<script src="../dist/picturefill.js"></script>
-
-
+		<script async="" src="../dist/plugins/intrinsic-dimension/pf.intrinsic.min.js"></script>
+		<script async="" src="../dist/picturefill.min.js"></script>
 	</head>
 	<body>
 		<a href="http://responsiveimages.org/" class="ricg"><img src="https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png"></a>
@@ -29,7 +24,7 @@ <h3><code>media</code> example with one APNG source qualified with a <code>type<
         &lt;!--[if IE 9]&gt;&lt;video style="display: none;"&gt;&lt;![endif]--&gt;
         &lt;source srcset="../examples/images/ballanim.png" type="image/x-apng"&gt;
         &lt;source srcset="../examples/images/ballanim.gif" type="image/gif"&gt;
-        
+
         &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
         &lt;img srcset="../examples/images/ballanim.gif" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"&gt;
 &lt;/picture&gt;
@@ -42,7 +37,7 @@ <h3><code>media</code> example with one APNG source qualified with a <code>type<
 				<!--[if IE 9]><video style="display: none;"><![endif]-->
 				<source srcset="../examples/images/ballanim.png" type="image/x-apng">
 				<source srcset="../examples/images/ballanim.gif" type="image/gif">
-				
+
 				<!--[if IE 9]></video><![endif]-->
 				<img srcset="../examples/images/ballanim.gif" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
 		</picture>

diff --git a/index.html b/index.html
@@ -8,11 +8,8 @@
 
 		<link href='examples/styles.css' rel='stylesheet' type='text/css'>
 		<link href="https://raw.githubusercontent.com/ResponsiveImagesCG/responsiveimages.org/master/img/favicon.ico" rel="icon">
-		<script>
-			// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
-			document.createElement( "picture" );
-		</script>
-		<script async="true" src="dist/picturefill.js"></script>
+		<script async="" src="dist/plugins/intrinsic-dimension/pf.intrinsic.min.js"></script>
+		<script async="" src="dist/picturefill.min.js"></script>
 	</head>
 	<body>
 
@@ -118,7 +115,7 @@ <h3 class="hed-pattern" id="img-srcset">Using the `srcset` attribute</h3>
 			<p>Here's how that renders on your display:</p>
 			<img srcset="examples/images/large.jpg 1x, examples/images/extralarge.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
 
-			<p>The <code>2x</code> source will be shown at the inherent width of the <code>1x</code> source—so the two sources will occupy the same space in your layout, but the <code>2x</code> source will be displayed at double the pixel density. This only applies to the <em>natural</em> size of the <code>img</code>—resizing the image via CSS will behave as expected.</p>
+			<p>If the <a href="dist/plugins/intrinsic-dimension/">intrinsic dimension plugin</a> is installed: The <code>2x</code> source will be shown at the inherent width of the <code>1x</code> source—so the two sources will occupy the same space in your layout, but the <code>2x</code> source will be displayed at double the pixel density. This only applies to the <em>natural</em> size of the <code>img</code>—resizing the image via CSS will behave as expected.</p>
 
 			<p class="note" id="caching">Modern browsers that support <code>srcset</code> natively may select a cached file that meets the minimum media condition, even if it is “overkill” for the current media condition. For example, a <code>2x</code> file may be shown on a <code>1x</code> device, if that <code>2x</code> file is already in the cache—there’d be no reason to make an additional request when the user will see no discernable difference, after all. This is typically encountered only on sites with multiple versions of the same image displayed in multiple elements at different sizes (like our demo page). The occasional selection of "oversize" resources—depending on the cache—is currently an expected behavior in native implementations and you may encounter it during testing.</p>