如何确定一个链接资源成功加载

我用下面的JavaScript动态加载样式表是否：如何确定一个链接资源成功加载

function set_stylesheet(name) { 
    var link = document.getElementById('userstylelink'); 
    link.href = link.href.replace(/[^\/]+\.css$/, name + '.css'); 
}

有什么方法来确定新的CSS文件是否加载成功？如果失败，我希望能够应用默认样式表。

来源

2011-04-09 zildjohn01

这可能是一种方法：使用AJAX获取文件后检查响应代码。 – pimvdb 2011-04-09 20:59:45

理想情况下，您可以在开始时加载它们，然后在之间切换。

http://www.alistapart.com/articles/alternate/

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

这并没有真正回答这个问题，但我认为这种方式是首选。

来源

2011-04-09 21:40:36 raylu

我建议通过ajax加载，检查用户pimvbd提到的响应，还可以在样式表的末尾放置一个虚拟规则，用可检查的声明来设置隐藏元素的样式。例如，给一个隐藏的div边框：987px，并检查隐藏的div的边框是否实际上是987px。是的，它引入了对该风格和该元素的依赖关系。我已经与很多人进行过无休止的讨论，而且还没有更好的方法。希望弄点儿关注在不久的将来的浏览器版本...

来源

2011-04-13 19:33:58

您可能希望看到我的回答另一个类似的问题在这里： Detect and log when external JavaScript or CSS resources fail to load

基本上，你可以添加一个onload回调，以查看文件已加载。（如果你通过JS加载当然）

来源

2011-04-18 21:14:42 joseeight

最简单的方法是在分配新的href后检查link元素的styleSheet.cssText属性。

function set_stylesheet(name) { 
    var link = document.getElementById('userstylelink');  
    link.href = link.href.replace(/[^\/]+\.css$/, name + '.css'); 
    if (link.styleSheet.cssText) { 
    //if not empty string, it was loaded 
    } 
    else { 
    link.href = "default.css"; 
    }

或者，有一个“onerror”事件，当资源在href分配后未能加载时触发。

来源

2011-04-29 13:16:40 panpawel

有一种解决方案不需要javascript或检测样式表是否加载。

看来你也可以将默认样式应用于内置样式表，然后让动态加载样式表覆盖默认值。如果新的样式表没有加载，默认情况下已经加载并且没有进一步的工作。如果新的样式表加载，它会覆盖默认值并显示新的样式。

来源

2011-06-27 09:19:29 jfriend00

如何确定一个链接资源成功加载

回答

相关问题