The last thread on this was asked in 2010 and, as far as I can tell, there is still incomplete (or no) support for the 'load' event of a element. My code:
function loadedCb(){ console.log("Loaded!"); };
function errorCb(){ console.log("Error!"); };
var file = document.createElement("link");
file.type = "text/css";
file.rel = "stylesheet";
file.addEventListener('load', loadedCb); // or: file.onload = loadedCb;
file.addEventListener('error', errorCb); // or: file.onerror = errorCb;
file.src = "theDir/theFile.css"; // should immediately start to load.
document.getElementsByTagName('head')[0].appendChild(file);
When this code is run in Firefox 49.0.2, neither callback is ever invoked (and the CSS file also never loads in at any point, which perhaps suggests I've done something wrong). The corresponding code for loading in a .js
file as a <script>
element works perfectly, however.
Is there any elegant solution to running a callback upon loading in (or erroring upon) a CSS file as of 2016? Or am I doing something basic wrong? I am not using JQuery in my project, incidentally.