脚本/链接标记与AJAX加载

时间:2016-01-16 13:35:39

标签: javascript jquery html css ajax

我想加载脚本标记和链接标记。我可以这样做

 <script src="sample.js" type="text/javascript"></script>
 <link type="text/css" href="sample.css" rel="stylesheet"></link>

(或)

 $.ajax({
    url: 'sample.js',
    dataType: 'script',
    success: function(data) {},
    error: function(data) {}
 });

但我想知道哪一个是最好/最安全的[一般]。

我认为我们可以使用ajax加载轻松处理错误,否则我们必须检查onLoad函数以查找脚本是否已成功加载并查找链接是否已成功加载我们需要遍历document.styleSheets

有什么建议吗?

我主要担心的是找到脚本和链接是成功加载和安全的方式,这是为了测试所以我不喜欢很多代码来做这件事。

1 个答案:

答案 0 :(得分:0)

关于javascript文件:
Javascript具有阻塞性质。如果要逐页加载多个外部js文件,请考虑每个文件都将被加载并执行。如果在执行某些javascript文件时发生某些错误,您可以在开发人员控制台中观察它。不幸的是,JavaScript 下载仍然阻止下载其他资源。

  

结论:在<link>标记之前放置<script>个标记。建议将所有<script>标记放在靠近底部的位置   <body>标记尽可能


至于css个文件: 要检查某个样式表是否已成功加载,这是一件非常重要的事情。这里用JQuery检查现有(未加载)的css文件:

if (!$("link[href='sample.css']").length){
    console.log('error while downloading sample.css');
    $('<link href="sample.css" rel="stylesheet">').appendTo("head");
}

要检查某个css文件是否已完全加载,您可能会在纯Javascript中使用currentStylewindow.getComputedStyle方法并搜索具有已知类或标识符的某个元素(这正是存在于css文件中