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我创建了以下文章：The best way to load external JavaScript，但我不确定。

更新

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

Answer 1

您可以像使用css一样使用javascript执行相同操作。

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

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

Answer 2

您可能希望为每个成功加载的JS文件向主体添加一个类（在每个JS文件中编写代码，以便向body元素添加额外的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 个答案: