如何检测是否加载了javascript文件？ [英] How to detect if javascript files are loaded?

问题描述

加载JavaScript文件时是否会触发事件？问题出现了，因为YSlow建议将JavaScript文件移动到页面底部。这意味着
$（document）.ready（function1）在包含 function1 已加载。

Is there an event that fires when JavaScript files are loaded? The problem came up because YSlow recommends to move JavaScript files to the bottom of the page. This means that $(document).ready(function1) is fired before the js file that contains the code for function1 is loaded.

如何避免这种情况？

推荐答案

我没有方便的参考，但脚本标签按顺序处理，所以如果你把 $（文件）.ready（function1）在定义function1等的脚本标签之后的脚本标签中，你应该好好去。

I don't have a reference for it handy, but script tags are processed in order, and so if you put your $(document).ready(function1) in a script tag after the script tags that define function1, etc., you should be good to go.

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

当然，另一种方法是确保你只使用一个脚本标签，通过组合文件作为构建过程的一部分。 （除非你从某个地方加载CDN中的其他内容。）这也有助于提高页面的感知速度。

Of course, another approach would be to ensure that you're using only one script tag, in total, by combining files as part of your build process. (Unless you're loading the other ones from a CDN somewhere.) That will also help improve the perceived speed of your page.

编辑：刚才意识到我没有'实际上回答你的问题：我不认为有一个被解雇的跨浏览器事件，没有。 如果你努力工作，请参见下文。你可以测试对于符号并使用setTimeout重新安排：

Just realized that I didn't actually answer your question: I don't think there's a cross-browser event that's fired, no. There is if you work hard enough, see below. You can test for symbols and use setTimeout to reschedule:

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

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

...but you shouldn't have to do that if you get your script tag order correct.

更新：您可以获取脚本元素的加载通知如果您愿意，可以动态添加到页面。要获得广泛的浏览器支持，您必须做两件事，但作为一种组合技术，它可以工作：

Update: You can get load notifications for script elements you add to the page dynamically if you like. To get broad browser support, you have to do two different things, but as a combined technique this works:

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％跨浏览器可靠。另请注意，某些浏览器会执行这两种机制，因此已完成变量以避免重复通知。

In my experience, error notification (onerror) is not 100% cross-browser reliable. Also note that some browsers will do both mechanisms, hence the done variable to avoid duplicate notifications.

这篇关于如何检测是否加载了javascript文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！