mirror of
https://github.com/kremalicious/blog.git
synced 2024-09-24 18:18:49 +02:00
67 lines
2.0 KiB
JavaScript
67 lines
2.0 KiB
JavaScript
/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
|
|
|
|
(function( w ){
|
|
|
|
// Enable strict mode
|
|
"use strict";
|
|
|
|
w.picturefill = function() {
|
|
var ps = w.document.getElementsByTagName( "span" );
|
|
|
|
// Loop the pictures
|
|
for( var i = 0, il = ps.length; i < il; i++ ){
|
|
if( ps[ i ].getAttribute( "data-picture" ) !== null ){
|
|
|
|
var sources = ps[ i ].getElementsByTagName( "span" ),
|
|
matches = [];
|
|
|
|
// See if which sources match
|
|
for( var j = 0, jl = sources.length; j < jl; j++ ){
|
|
var media = sources[ j ].getAttribute( "data-media" );
|
|
// if there's no media specified, OR w.matchMedia is supported
|
|
if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
|
|
matches.push( sources[ j ] );
|
|
}
|
|
}
|
|
|
|
// Find any existing img element in the picture element
|
|
var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
|
|
|
|
if( matches.length ){
|
|
var matchedEl = matches.pop();
|
|
if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
|
|
picImg = w.document.createElement( "img" );
|
|
picImg.alt = ps[ i ].getAttribute( "data-alt" );
|
|
}
|
|
else if( matchedEl === picImg.parentNode ){
|
|
// Skip further actions if the correct image is already in place
|
|
continue;
|
|
}
|
|
|
|
picImg.src = matchedEl.getAttribute( "data-src" );
|
|
matchedEl.appendChild( picImg );
|
|
picImg.removeAttribute("width");
|
|
picImg.removeAttribute("height");
|
|
}
|
|
else if( picImg ){
|
|
picImg.parentNode.removeChild( picImg );
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Run on resize and domready (w.load as a fallback)
|
|
if( w.addEventListener ){
|
|
w.addEventListener( "resize", w.picturefill, false );
|
|
w.addEventListener( "DOMContentLoaded", function(){
|
|
w.picturefill();
|
|
// Run once only
|
|
w.removeEventListener( "load", w.picturefill, false );
|
|
}, false );
|
|
w.addEventListener( "load", w.picturefill, false );
|
|
}
|
|
else if( w.attachEvent ){
|
|
w.attachEvent( "onload", w.picturefill );
|
|
}
|
|
|
|
}( this )); |