检测外部脚本是否已加载

Question

使用JavaScript,有没有办法检测外部脚本(来自第三方供应商)是否已完全加载？

有问题的脚本用于拉入并嵌入作业列表的标记,但遗憾的是,它没有使用任何变量或函数.它用于document.write输出嵌入在我的页面中的所有内容.

理想情况下,我想在等待外部脚本加载时显示某种加载消息,如果加载失败,则显示"我们很抱歉,稍后再回来查看..."消息.

我在网站上使用jQuery,但在进行jQuery调用之前调用了这个外部脚本.

以下是document.write外部脚本的内容:

document.write('<div class="jt_job_list">');
document.write("
    <div class=\"jt_job jt_row2\">
        <div class=\"jt_job_position\">
            <a href=\"http://example.com/job.html\">Position Title</a>
        </div>
        <div class=\"jt_job_location\">City, State</div>
        <div class=\"jt_job_company\">Job Company Name</div>
    </div>
");

Answer 1

将函数附加到load事件:

<script type="text/javascript" src="whatever.js" onload ="SomeFunction()" />

至于你的loading...问题,尝试显示一个div加载,然后只是display:none在你的onload函数中.但是,请确保处理脚本无法加载的情况.

Answer 2

脚本标签阻止下载,因此只要依赖于您的脚本的内容低于其加载的脚本的位置,您应该没问题.即使脚本在页面正文中内嵌,也是如此.

这个网站有一个很好的例子说明这是如何工作的.

如果您异步加载脚本,这显然不起作用.

在浏览器继续解析页面之前,将立即获取并执行没有异步或延迟属性的脚本.

资料来源:MDN

Answer 3

感谢上面的帮助，特别是 ngmiceli 的 Steve Souders 链接！

我决定采取可能是“懒惰”的方法，并且放弃“正在加载”消息：

$(document).ready(function(){
    if ($('.jt_job_list').length === 0){
        $('#job-board').html("<p>We're sorry, but the Job Board isn't currently available. Please try again in a few minutes.</p>");
    };
});

非常简单，但我想看看具有该类的元素是否.jt_job_list在 dom 中。如果不是，我会显示一条错误消息。