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

Answer 2

当他们说“页面底部”时，它们并不是字面上的底部：它们是指在结束</body>标记之前。将您的脚本放在此处，它们将在DOMReady事件之前加载；然后放置它们，并且DOM在加载之前就已经准备就绪（因为</html>解析结束标记时已完成），您发现这将无法工作。

如果您想知道我的意思是什么：我曾在Yahoo!工作过。然后将脚本放在</body>标记之前：-)

编辑：另外，请参阅TJ Crowder的回复，并确保您按正确的顺序放置东西。

Answer 3

除了@TJ Crowder的答案之外，我还添加了一个递归外部循环，该循环允许循环访问数组中的所有脚本，然后在加载所有脚本后执行一个函数：

loadList([array of scripts], 0, function(){// do your post-scriptload stuff})

function loadList(list, i, callback)

{

    {

        loadScript(list[i], function()

        {

            if(i < list.length-1)

            {

                loadList(list, i+1, callback);  

            }

            else

            {

                callback();

            }

        })

    }

}

当然，如果您愿意，可以制作一个包装来摆脱“ 0”：

function prettyLoadList(list, callback)

{

    loadList(list, 0, callback);

}

不错的工作@TJ Crowder-我很想在其他线程中看到的“只是在运行回调之前增加几秒钟的延迟”。