How to check that all javascript/css loaded correctly
Question
I am trying to find out a solution which will notify user if some resources did not loaded correctly.
Already I founded following methods:
For CSS I found example in Trello source:
<div id="nocss"> Your browser was unable to load all of Trello's resources. They may have been blocked by your firewall, proxy or browser configuration. <br>Press Ctrl+F5 or Ctrl+Shift+R to have your browser try again. <hr> </div>And in last downloaded CSS there is a following CSS:
#nocss { display: none; }For JS i founded following article: The best way to load external JavaScript , but I am not sure about it.
UPDATE
Small update: the best solution should work also with files from CDN, because they are the biggest problem. I had a site in which I added jquery and in companies behind the firewall it was blocked.
3 answers
solution1
1 2013-09-13 09:05:16
You can do pretty much the same with your javascript like you do with your css.
$(document).ready(function(){
$("#nojs").css("display","none");
}
This code uses jquery. If put into the beginning of your javascript file it hides a div like your css does once the javascript is loaded. (of course you need a <div id="nojs"> )
solution2
1 2013-09-13 09:11:08
You might want to add a class to the body for each successfully loaded JS file (in each JS file write code to add additional CSS class to the body element like so $(document.body).addClass("SomeClass") ). Then simply check
if (!$(document.body).hasClass("ALL YOUR CLASSES")){
$("nojs").show();
}
This should do the trick.
If you don't have access to the files and cannot modify them then why do something like the following: <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\\/script>')</script> (Taken from HTML5 Boilerplate)
solution3
1 2013-09-13 09:20:43
Rather than being dependent on any other method, can you use
window.onload=function(){SomeJavaScriptCode};
or
<body onload="SomeJavaScriptCode">
Above ones will only execute after loading all contents of your page. (onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.