Skip to content
Browse files

Exit early if picture is natively supported (totally hypothetical at …

…this point). If Modernizr is available, add a test for picture to it (adds handy picture/no-picture classes to HTML element). Also uses Modernizr's mq shim if available. Both these enhancements do NOT REQUIRE Modernizr and take just a few lines to implement.
  • Loading branch information...
1 parent 8d596dd commit b5e5efc04c4954091d560d7b1b46250c2c85670a @gordonbrander committed Feb 21, 2012
Showing with 45 additions and 8 deletions.
  1. +45 −8 picturefill.js
View
53 picturefill.js
@@ -9,14 +9,51 @@
B) A major browser implements <picture>
*/
(function( w ){
+ var document = w.document,
+ Modernizr = w.Modernizr;
- // requires media query supporting browser with matchMedia support (polyfill available)
- if( !w.matchMedia || !w.matchMedia( "only all" ) ){
- return;
- }
+ // Test if `<picture>` is supported natively. Store the boolean result for
+ // later use.
+ var hasNativePicture = !!(
+ document.createElement('picture') && window.HTMLPictureElement
+ );
+
+ // Register a Modernizr test for `<picture>`, if Modernizr is present.
+ // Modernizr is NOT required -- this just augments it if present.
+ //
+ // If you have support for Modernizr classes in your build, this will also
+ // give you a handy `.picture` or `.no-picture` class on the `html` element.
+ if (Modernizr) Modernizr.addTest('picture', function () {
+ return hasNativePicture;
+ });
+
+ // Exit early if `<picture>` is natively supported.
+ if (hasNativePicture) return;
+
+ var matchMedia = w.matchMedia;
+
+ // A wrapper for `window.matchMedia` that gives us a consistent interface
+ // whether we are using `Modernizr.mq` or `matchMedia`.
+ var mqWrapper = function (query) {
+ return matchMedia(query).matches;
+ };
+
+ // Pick a media query function. If Modernizr is installed with the media
+ // query extension, use it; otherwise, use `window.matchMedia` wrapper
+ // defined above.
+ var mq = Modernizr && Modernizr.mq ?
+ Modernizr.mq :
+ (matchMedia && matchMedia( "only all" ) ? mqWrapper : null);
+
+ // Exit early if:
+ //
+ // * Browser supports `<picture>`
@gordonbrander
Owner

Oops, this comment isn't quite right -- should be removed. Sry!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ // * Browser does not support either `<picture>`,
+ // or Media Queries, or Modernizr-shimmed media queries.
+ if( !mq ) return;
w.picturefill = function(){
- var ps = w.document.getElementsByTagName( "picture" );
+ var ps = document.getElementsByTagName( "picture" );
// Loop the pictures
for( var i = 0, il = ps.length; i < il; i++ ){
@@ -26,7 +63,7 @@
// See if which sources match
for( var j = 0, jl = sources.length; j < jl; j++ ){
var media = sources[ j ].getAttribute( "media" );
- if( !media || w.matchMedia( media ).matches ){
+ if( !media || mq( media ) ){
matches.push( sources[ j ] );
}
}
@@ -36,7 +73,7 @@
ps[ i ].getElementsByTagName( "img" )[ 0 ].src = matches.pop().getAttribute( "src" );
}
}
- }
+ };
// Run on resize
if( w.addEventListener ){
@@ -46,4 +83,4 @@
// Run when DOM is ready
picturefill();
-})( this );
+})( this );

0 comments on commit b5e5efc

Please sign in to comment.
Something went wrong with that request. Please try again.