如何检查所有javascript / css是否正确加载

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: 对于CSS，我在Trello源代码中找到了示例：

 <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: 在上次下载的CSS中，有以下CSS：

 #nocss { display: none; }

For JS i founded following article: The best way to load external JavaScript , but I am not sure about it. 对于JS，我创建了以下文章：加载外部JavaScript的最佳方法，但我不确定。

UPDATE UPDATE

Small update: the best solution should work also with files from CDN, because they are the biggest problem. 小更新：最佳解决方案也应与CDN中的文件一起使用，因为它们是最大的问题。 I had a site in which I added jquery and in companies behind the firewall it was blocked. 我有一个站点，在其中添加了jquery，在防火墙后面的公司中，该站点被阻止了。

Answer 1

You can do pretty much the same with your javascript like you do with your css. 您可以像使用CSS一样使用javascript进行几乎相同的操作。

$(document).ready(function(){
    $("#nojs").css("display","none");
}

This code uses jquery. 此代码使用jquery。 If put into the beginning of your javascript file it hides a div like your css does once the javascript is loaded. 如果放入javascript文件的开头，则在加载javascript后，它会像css一样隐藏div。 (of course you need a <div id="nojs"> ) （当然，您需要<div id="nojs"> ）

Answer 2

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") ). 您可能想为每个成功加载的JS文件的主体添加一个类（在每个JS文件中编写代码，以将其他CSS类添加到主体元素中，例如$(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) 如果您无权访问文件并且无法修改它们，那么为什么要执行以下操作： <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\\/script>')</script> （摘自HTML5 Boilerplate）

Answer 3

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.).) （一旦网页完全加载了所有内容（包括图像，脚本文件，CSS文件等），onload通常在元素内用于执行脚本。）

如何检查所有javascript / css是否正确加载

问题描述

3 个解决方案

解决方案1
1 2013-09-13 09:05:16

解决方案2
1 2013-09-13 09:11:08

解决方案3
1 2013-09-13 09:20:43

如何检查所有javascript / css是否正确加载

问题描述

3 个解决方案

解决方案1 1 2013-09-13 09:05:16

解决方案2 1 2013-09-13 09:11:08

解决方案3 1 2013-09-13 09:20:43

解决方案1
1 2013-09-13 09:05:16

解决方案2
1 2013-09-13 09:11:08

解决方案3
1 2013-09-13 09:20:43