如何检测是否加载了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变量以避免重复的通知。