Skip to content
This repository
Browse code

This branch is a div-based equivalent of the picture element markup p…

…attern. It can be used today without concern for running into problems with differences in future picture implementations. That said, it will always be tied to JavaScript, and the markup is a little clunky to those with an eye for semantics.
  • Loading branch information...
commit 1bb548a9b394b82dcc5627fcb6d1461fcd327f1f 1 parent 794dbb0
scottjehl authored

Showing 2 changed files with 29 additions and 46 deletions. Show diff stats Hide diff stats

  1. +6 10 index.html
  2. +23 36 picturefill.js
16 index.html
@@ -17,18 +17,14 @@
17 17
18 18 <p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>
19 19
20   - <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
21   - <!-- <source src="external/imgs/small.jpg"> -->
22   - <source src="external/imgs/small.jpg">
23   - <!-- <source src="external/imgs/medium.jpg" media="(min-width: 400px)"> -->
24   - <source src="external/imgs/medium.jpg" media="(min-width: 400px)">
25   - <!-- <source src="external/imgs/large.jpg" media="(min-width: 800px)"> -->
26   - <source src="external/imgs/large.jpg" media="(min-width: 800px)">
27   - <!-- <source src="external/imgs/extralarge.jpg" media="(min-width: 1000px)"> -->
28   - <source src="external/imgs/extralarge.jpg" media="(min-width: 1000px)">
  20 + <div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  21 + <div data-src="external/imgs/small.jpg"></div>
  22 + <div data-src="external/imgs/medium.jpg" data-media="(min-width: 400px)"></div>
  23 + <div data-src="external/imgs/large.jpg" data-media="(min-width: 800px)"></div>
  24 + <div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></div>
29 25
30 26 <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
31 27 <noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
32   - </picture>
  28 + </div>
33 29 </body>
34 30 </html>
59 picturefill.js
@@ -11,51 +11,38 @@
11 11
12 12 // Enable strict mode
13 13 "use strict";
14   -
15   - // Test if `<picture>` is supported natively, if so, exit - no polyfill needed.
16   - if ( !!( w.document.createElement( "picture" ) && w.document.createElement( "source" ) && w.HTMLPictureElement ) ){
17   - return;
18   - }
19   -
  14 +
20 15 w.picturefill = function() {
21   - var ps = w.document.getElementsByTagName( "picture" );
  16 + var ps = w.document.getElementsByTagName( "div" );
22 17
23 18 // Loop the pictures
24 19 for( var i = 0, il = ps.length; i < il; i++ ){
25   - var sources = ps[ i ].getElementsByTagName( "source" ),
26   - matches = [];
27   -
28   - // If no sources are found, they're likely erased from the DOM. Try finding them inside comments.
29   - if( !sources.length ){
30   - var picText = ps[ i ].innerHTML,
31   - frag = w.document.createElement( "div" ),
32   - // For IE9, convert the source elements to divs
33   - srcs = picText.replace( /(<)source([^>]+>)/gmi, "$1div$2" ).match( /<div[^>]+>/gmi );
34   -
35   - frag.innerHTML = srcs.join( "" );
36   - sources = frag.getElementsByTagName( "div" );
37   - }
  20 + if( ps[ i ].getAttribute( "data-picture" ) !== null ){
  21 + alert("dfads")
  22 + var sources = ps[ i ].getElementsByTagName( "div" ),
  23 + matches = [];
38 24
39   - // See if which sources match
40   - for( var j = 0, jl = sources.length; j < jl; j++ ){
41   - var media = sources[ j ].getAttribute( "media" );
42   - // if there's no media specified, OR w.matchMedia is supported
43   - if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
44   - matches.push( sources[ j ] );
  25 + // See if which sources match
  26 + for( var j = 0, jl = sources.length; j < jl; j++ ){
  27 + var media = sources[ j ].getAttribute( "data-media" );
  28 + // if there's no media specified, OR w.matchMedia is supported
  29 + if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
  30 + matches.push( sources[ j ] );
  31 + }
45 32 }
46   - }
47 33
48   - if( matches.length ){
49   - // Set fallback img element src from that of last matching source element
50   - var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
  34 + if( matches.length ){
  35 + // Set fallback img element src from that of last matching source element
  36 + var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
51 37
52   - if( !picImg ){
53   - picImg = w.document.createElement( "img" );
54   - picImg.alt = ps[ i ].getAttribute( "alt" );
55   - ps[ i ].appendChild( picImg );
56   - }
  38 + if( !picImg ){
  39 + picImg = w.document.createElement( "img" );
  40 + picImg.alt = ps[ i ].getAttribute( "data-alt" );
  41 + ps[ i ].appendChild( picImg );
  42 + }
57 43
58   - picImg.src = matches.pop().getAttribute( "src" );
  44 + picImg.src = matches.pop().getAttribute( "data-src" );
  45 + }
59 46 }
60 47 }
61 48 };

0 comments on commit 1bb548a

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