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

Question

我试图找出一种解决方案，如果某些资源未正确加载，它将通知用户。

我已经建立了以下方法：

对于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>

在上次下载的CSS中，有以下CSS：

 #nocss { display: none; }

对于JS，我创建了以下文章：加载外部JavaScript的最佳方法，但我不确定。

UPDATE

小更新：最佳解决方案也应与CDN中的文件一起使用，因为它们是最大的问题。 我有一个站点，在其中添加了jquery，在防火墙后面的公司中，该站点被阻止了。

Answer 1

您可以像使用CSS一样使用javascript进行几乎相同的操作。

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

此代码使用jquery。 如果放入javascript文件的开头，则在加载javascript后，它会像css一样隐藏div。 （当然，您需要<div id="nojs"> ）

Answer 2

您可能想为每个成功加载的JS文件的主体添加一个类（在每个JS文件中编写代码，以将其他CSS类添加到主体元素中，例如$(document.body).addClass("SomeClass") ）。 然后只需检查

if (!$(document.body).hasClass("ALL YOUR CLASSES")){
    $("nojs").show();
}

这应该可以解决问题。

如果您无权访问文件并且无法修改它们，那么为什么要执行以下操作： <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\\/script>')</script> （摘自HTML5 Boilerplate）

Answer 3

您可以使用而不是依赖其他任何方法

window.onload=function(){SomeJavaScriptCode};

要么

<body onload="SomeJavaScriptCode">

以上内容仅在加载页面的所有内容后执行。 （一旦网页完全加载了所有内容（包括图像，脚本文件，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