上的Web瀏覽器的JavaScript是單線程(禁止使用的web workers),所以如果你的JavaScript代碼運行,根據定義沒有其他的JavaScript代碼運行。*
爲了儘量保證你的腳本發生之後頁面上的所有其他JavaScript已經被下載和評估,已發生的所有渲染之後,提出了一些建議:
- 將腳本標記爲您的代碼在文件的最後。
- 在標籤上使用
defer
and async
屬性(它們會被不支持它們的瀏覽器忽略,但目標是儘可能地使您的最後)。
- 通過DOM2風格的連接鉤住
window
load
事件(例如,在具有標準支持的瀏覽器上爲addEventListener
,在較舊的IE版本上爲attachEvent
)。
- 在
load
事件中,安排您的代碼在setTimeout
延遲0ms後運行(它不會真的爲零,它會稍微長一些)。
所以,script
標籤:
<script async defer src="yourfile.js"></script>
...和yourfile.js
:
(function() {
if (window.addEventListener) {
window.addEventListener("load", loadHandler, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", loadHandler);
}
else {
window.onload = loadHandler; // Or you may want to leave this off and just not support REALLY old browsers
}
function loadHandler() {
setTimeout(doMyStuff, 0);
}
function doMyStuff() {
// Your stuff here. All images in the original markup are guaranteed
// to have been loaded (or failed) by the `load` event, and you know
// that other handlers for the `load` event have now been fired since
// we yielded back from our `load` handler
}
})();
這並不意味着其他代碼不會已經安排自己以後運行(通過setTimeout
,例如,就像我們上面做的,但有一個更長的超時),但。
所以你可以做一些事情來做最後的嘗試,但我不相信有任何方法可以在沒有完全控制頁面和腳本運行的情況下實際保證它(我從問題是你沒有)。
(*有一些邊緣的情況下螺紋可以懸浮在一個地方,然後允許其他代碼到在另一個地方運行[例如,當一個AJAX調用完成而被示出的alert
消息有些瀏覽器會觸發ajax處理程序,即使0123'上的另一個函數正在等待解除],但它們是邊緣情況,並且仍然只有一件事情正在一次完成。)
什麼瀏覽器運行? – Boomer 2012-01-09 14:43:07
@Boomer我需要做這個跨瀏覽器。 – gotqn 2012-01-09 14:44:38
這可能有所幫助:http://stackoverflow.com/questions/3283576/how-to-trace-javascript-events-stack-trace – 2012-01-09 14:45:46