forked from scottjehl/picturefill
-
Notifications
You must be signed in to change notification settings - Fork 1
/
PictureElement.js
73 lines (58 loc) · 1.89 KB
/
PictureElement.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/*
Picture Element - Responsive Images that work today.
Author: Scott Jehl, Filament Group, 2012
Modified by: Nate Zaugg to mimic the HTML spec more closely
License: MIT/GPLv2
*/
// Add support for picture element in IE6-8
document.createElement('picture');
(function(w){
// Enable strict mode
"use strict";
w.pictureElement = function() {
var ps = w.document.getElementsByTagName('picture');
// Loop the pictures
for (var i = 0; i < ps.length; i++) {
var sources = ps[i].getElementsByTagName('source'),
matches = [];
// See if which sources match
for (var j = 0; j < sources.length; j++){
var media = sources[j].getAttribute('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) {
if (!picImg){
picImg = w.document.createElement('img');
// Copy over any/all attributes (especially alt & class)
var attrs = ps[i].attributes;
for (var a = 0; a < attrs.length; a++) {
picImg.setAttribute([attrs.item(a).nodeName], attrs.item(a).nodeValue);
}
ps[i].appendChild(picImg);
}
picImg.src = matches.pop().getAttribute('src');
}
else if (picImg) {
ps[i].removeChild(picImg);
}
}
};
// Run on resize and domready (w.load as a fallback)
if (w.addEventListener) {
w.addEventListener('resize', w.pictureElement, false);
w.addEventListener('DOMContentLoaded', function(){
w.pictureElement();
// Run once only
w.removeEventListener('load', w.pictureElement, false);
}, false );
w.addEventListener('load', w.pictureElement, false);
}
else if (w.attachEvent) {
w.attachEvent('onload', w.pictureElement);
}
}( this ));