forked from filamentgroup/loadCSS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cssrelpreload.js
111 lines (102 loc) · 3.19 KB
/
cssrelpreload.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
/* This file is meant as a standalone workflow for
- testing support for link[rel=preload]
- enabling async CSS loading in browsers that do not support rel=preload
- applying rel preload css once loaded, whether supported or not.
*/
(function( w ){
"use strict";
// rel=preload support test
if( !w.loadCSS ){
w.loadCSS = function(){};
}
// define on the loadCSS obj
var rp = loadCSS.relpreload = {};
// rel=preload feature support test
// runs once and returns a function for compat purposes
rp.support = (function(){
var ret;
try {
ret = w.document.createElement( "link" ).relList.supports( "preload" );
} catch (e) {
ret = false;
}
return function(){
return ret;
};
})();
// if preload isn't supported, get an asynchronous load by using a non-matching media attribute
// then change that media back to its intended value on load
rp.bindMediaToggle = function( link ){
// remember existing media attr for ultimate state, or default to 'all'
var finalMedia = link.media || "all";
function enableStylesheet(){
// unbind listeners
if( link.addEventListener ){
link.removeEventListener( "load", enableStylesheet );
} else if( link.attachEvent ){
link.detachEvent( "onload", enableStylesheet );
}
link.setAttribute( "onload", null );
link.media = finalMedia;
}
// bind load handlers to enable media
if( link.addEventListener ){
link.addEventListener( "load", enableStylesheet );
} else if( link.attachEvent ){
link.attachEvent( "onload", enableStylesheet );
}
// Set rel and non-applicable media type to start an async request
// note: timeout allows this to happen async to let rendering continue in IE
setTimeout(function(){
link.rel = "stylesheet";
link.media = "only x";
});
// also enable media after 3 seconds,
// which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
setTimeout( enableStylesheet, 3000 );
};
// loop through link elements in DOM
rp.poly = function(){
// double check this to prevent external calls from running
if( rp.support() ){
return;
}
var links = w.document.getElementsByTagName( "link" );
for( var i = 0; i < links.length; i++ ){
var link = links[ i ];
// qualify links to those with rel=preload and as=style attrs
if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
// prevent rerunning on link
link.setAttribute( "data-loadcss", true );
// bind listeners to toggle media back
rp.bindMediaToggle( link );
}
}
};
// if unsupported, run the polyfill
if( !rp.support() ){
// run once at least
rp.poly();
// rerun poly on an interval until onload
var run = w.setInterval( rp.poly, 500 );
if( w.addEventListener ){
w.addEventListener( "load", function(){
rp.poly();
w.clearInterval( run );
} );
} else if( w.attachEvent ){
w.attachEvent( "onload", function(){
rp.poly();
w.clearInterval( run );
} );
}
}
// commonjs
if( typeof exports !== "undefined" ){
exports.loadCSS = loadCSS;
}
else {
w.loadCSS = loadCSS;
}
}( typeof global !== "undefined" ? global : this ) );