JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="css_load_catcher"></div>
<div class="css_load_time"></div>
</body>
</html>
CSS
.css_load_time
{
font-size: 30px;
text-align: left;
background: transparent;
}
JavaScript
InnerCallback = function(link, callback)
{
$('.css_load_time').html((new Date().getTime() - link._loadStart) + 'ms');
callback(link);
}
LoadCss = function(url, callback)
{
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
link._rawUrl = url;
if ($.browser.msie || $.browser.opera)
{
link.onload = function()
{
InnerCallback(link, callback);
}
}
else if ($.browser.mozilla)
{
$('.css_load_catcher').bind('animationstart', function()
{
InnerCallback(link, callback);
});
}
else if ($.browser.webkit)
{
$('.css_load_catcher').bind('webkitAnimationStart', function()
{
InnerCallback(link, callback);
});
}
link._loadStart = new Date().getTime();
$('head')[0].appendChild(link);
}
$(document).ready(function()
{
LoadCss('https://dl.dropbox.com/s/hzot90l848gihof/css_load_test.css?dl=1', function(link)
{
console.log(link, ' successefully loaded');
});
});