如何检测是否加载了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>解析结束标记时已经完成),你发现它将不起作用.

如果你想知道我怎么知道这就是他们的意思:我曾在雅虎工作过!我们把我们的脚本放在</body>标签之前:-)

编辑:另外,请参阅TJ Crowder的回复,并确保按正确的顺序排列.

Answer 3

看看jQuery的.load()http://api.jquery.com/load-event/

$('script').load(function () { });