JAVASCRIPT 93
Picturefill.js Guest on 13th May 2020 01:09:17 PM
  1. /*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
  2.  
  3. (function( w ){
  4.  
  5.         // Enable strict mode
  6.         "use strict";
  7.  
  8.         w.picturefill = function() {
  9.                 var ps = w.document.getElementsByTagName( "span" );
  10.  
  11.                 // Loop the pictures
  12.                 for( var i = 0, il = ps.length; i < il; i++ ){
  13.                         if( ps[ i ].getAttribute( "data-picture" ) !== null ){
  14.  
  15.                                 var sources = ps[ i ].getElementsByTagName( "span" ),
  16.                                         matches = [];
  17.  
  18.                                 // See if which sources match
  19.                                 for( var j = 0, jl = sources.length; j < jl; j++ ){
  20.                                         var media = sources[ j ].getAttribute( "data-media" );
  21.                                         // if there's no media specified, OR w.matchMedia is supported
  22.                                         if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
  23.                                                 matches.push( sources[ j ] );
  24.                                         }
  25.                                 }
  26.  
  27.                         // Find any existing img element in the picture element
  28.                         var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
  29.  
  30.                         if( matches.length ){
  31.                                 var matchedEl = matches.pop();
  32.                                 if( !picImg ){
  33.                                         picImg = w.document.createElement( "img" );
  34.                                         picImg.alt = ps[ i ].getAttribute( "data-alt" );
  35.                                 }
  36.  
  37.                                 picImg.src =  matchedEl.getAttribute( "data-src" );
  38.                                 matchedEl.appendChild( picImg );
  39.                         }
  40.                         else if( picImg ){
  41.                                 picImg.parentNode.removeChild( picImg );
  42.                         }
  43.                 }
  44.                 }
  45.         };
  46.  
  47.         // Run on resize and domready (w.load as a fallback)
  48.         if( w.addEventListener ){
  49.                 w.addEventListener( "resize", w.picturefill, false );
  50.                 w.addEventListener( "DOMContentLoaded", function(){
  51.                         w.picturefill();
  52.                         // Run once only
  53.                         w.removeEventListener( "load", w.picturefill, false );
  54.                 }, false );
  55.                 w.addEventListener( "load", w.picturefill, false );
  56.         }
  57.         else if( w.attachEvent ){
  58.                 w.attachEvent( "onload", w.picturefill );
  59.         }
  60.  
  61. }( this ));

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.