javascript - 如何检测是否加载了javascript文件？

Question

加载 JavaScript 文件时是否会触发一个事件？出现这个问题是因为 YSlow 建议将 JavaScript 文件移动到页面底部。这意味着$(document).ready(function1) 在加载包含 function1 代码的 js 文件之前触发。

如何避免这种情况？

Answer 1

我手边没有它的引用，但是脚本标签是按顺序处理的，所以如果你把你的 $(document).ready(function1) 放在脚本标签之后定义 function1 等的脚本标签，您应该可以开始了。

<script type='text/javascript' src='...'></script>
<script type='text/javascript' src='...'></script>
<script type='text/javascript'>
$(document).ready(function1);
</script>

当然，另一种方法是通过将文件合并为构建过程的一部分来确保您总共只使用一个脚本标记。 (除非您从某处的 CDN 加载其他内容。)这也将有助于提高页面的感知速度。

编辑:刚刚意识到我实际上并没有回答你的问题:我不认为有一个跨浏览器事件被触发，没有。 如果你足够努力的话会有，见下文。您可以测试符号并使用 setTimeout 重新安排:

<script type='text/javascript'>
function fireWhenReady() {
    if (typeof function1 != 'undefined') {
        function1();
    }
    else {
        setTimeout(fireWhenReady, 100);
    }
}
$(document).ready(fireWhenReady);
</script>

...但是如果您的脚本标签顺序正确，则不必这样做。

---

更新:如果您愿意，您可以获得动态添加到页面的 script 元素的加载通知。要获得广泛的浏览器支持，您必须做两件不同的事情，但作为一种组合技术，这是可行的:

function loadScript(path, callback) {

    var done = false;
    var scr = document.createElement('script');

    scr.onload = handleLoad;
    scr.onreadystatechange = handleReadyStateChange;
    scr.onerror = handleError;
    scr.src = path;
    document.body.appendChild(scr);

    function handleLoad() {
        if (!done) {
            done = true;
            callback(path, "ok");
        }
    }

    function handleReadyStateChange() {
        var state;

        if (!done) {
            state = scr.readyState;
            if (state === "complete") {
                handleLoad();
            }
        }
    }
    function handleError() {
        if (!done) {
            done = true;
            callback(path, "error");
        }
    }
}

根据我的经验，错误通知 (onerror) 并不是 100% 跨浏览器可靠的。另请注意，某些浏览器会执行这两种机制，因此使用 done 变量来避免重复通知。