当 JavaScript 文件加载时,是否有事件触发?这个问题是由于 YSlow 建议将 JavaScript 文件移动到页面底部而引起的。这意味着在包含 function1
代码的 js 文件加载之前,$(document).ready(function1)
就已经被触发了。
如何避免这种情况?
当 JavaScript 文件加载时,是否有事件触发?这个问题是由于 YSlow 建议将 JavaScript 文件移动到页面底部而引起的。这意味着在包含 function1
代码的 js 文件加载之前,$(document).ready(function1)
就已经被触发了。
如何避免这种情况?
我没有方便的参考资料,但是脚本标签是按顺序处理的,因此,如果您将$(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某处加载其他标签)。这也将有助于提高页面的感知速度。<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
)并不是完全跨浏览器可靠的。同时请注意有些浏览器会同时执行两种机制,因此使用done
变量可以避免重复通知。
</body>
标签之前。将你的脚本放在那里,它们将在DOMReady事件之前加载;如果放在之后,DOM将在它们加载之前准备好(因为在解析关闭的</html>
标签时已经完成),而这将无法正常工作,正如你所发现的那样。</body>
标签之前 :-)看一下 jQuery 的 .load() 方法 http://api.jquery.com/load-event/
$('script').load(function () { });
参照 @T.J. 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);
}
很好的工作@T.J. Crowder - 我在其他帖子中看到了“只需在运行回调之前添加几秒延迟”的做法,让我感到不安。
更改脚本的加载顺序,以便在ready
回调中使用function1
之前定义它。
此外,我发现将ready
回调定义为匿名方法比命名方法更好。
function1
的文件,然后再包含使用该函数的另一个文件。关键是你不能随意添加脚本文件。 - RaYell就像T.J.所写的那样:顺序已经定义好了(至少在浏览器执行JavaScript之前,它是按顺序执行的,即使它可能以某种方式并行下载脚本)。然而,显然你遇到了一些问题,也许你正在使用第三方JavaScript库,导致出现了404未找到或超时?如果是这样,那么请阅读最佳方法使用Google托管的jQuery,但在Google失败时回退到我的托管库。
$.getScript()
http://api.jquery.com/jQuery.getScript/ - tybro0103async
或defer
属性,这会改变事情的进行方式。在HTML中使用script
标签会使页面加载停滞,直到运行该脚本代码(因为它可能使用document.write
输出内容),因此您可以确定较早的script
已加载(或失败)以便于后面的加载(浏览器可以并行下载脚本,但它们确保按照HTML中的顺序执行)。async
和defer
会改变这一点。请参见:https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async - T.J. Crowder