Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

by binding to domready and load events (as a fallback), we can delive…

…r IE 8 and older browsers with fallback content using any source elements that don't rely on media queries (note: media types are fine though). In order for this to work, the script needs to run from HEAD, like any HTML5 shiv would. Script still works in non-IE browsers if it's not in HEAD.
  • Loading branch information...
commit 8268ab3a891bdfcbbf950ee2392e4ca33d198a0a 1 parent 66914e2
scottjehl authored
Showing with 13 additions and 13 deletions.
  1. +2 −3 index.html
  2. +11 −10 picturefill.js
View
5 index.html
@@ -4,6 +4,8 @@
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Picturefill</title>
+ <script src="external/matchmedia.js"></script>
+ <script src="picturefill.js"></script>
<style>
body { font-family: sans-serif }
img { max-width: 100% }
@@ -29,8 +31,5 @@
<!-- Fallback content for non-JS or non-media-query-supporting browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
</picture>
-
- <script src="external/matchmedia.js"></script>
- <script src="picturefill.js"></script>
</body>
</html>
View
21 picturefill.js
@@ -45,17 +45,18 @@
}
};
- // Run on resize
+ // Run on resize and domready (w.load as a fallback)
if( w.addEventListener ){
- w.addEventListener( "resize", picturefill, false );
+ w.addEventListener( "resize", w.picturefill, false );
+ if( w.document.onDOMContentLoaded ){
+ w.document.addEventListener( "DOMContentLoaded", w.picturefill, false );
+ }
+ else{
+ w.addEventListener( "load", w.picturefill, false );
+ }
+ }
+ else if( w.attachEvent ){
+ w.attachEvent( "onload", w.picturefill );
}
-
- /*
- Run now.
- * Note: picturefill must run first when the DOM is ready, or else it won't find any picture elements to enhance.
- * You can do this by referencing picturefill.js at the end of your document,
- * or by calling picturefill() when the DOM is ready, via a JavaScript framework's "ready" event
- */
- picturefill();
})( this );
Please sign in to comment.
Something went wrong with that request. Please try again.