javascript - jquery教學




如何檢測是否加載了javascript文件? (5)

加載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中的其他內容。)這也有助於提高頁面的感知速度。

編輯:剛剛意識到我實際上沒有回答你的問題: 我不認為有一個跨瀏覽器的事件被解雇了,沒有。 如果你努力工作,請參見下文。 您可以測試符號並使用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變量來避免重複通知。


更改腳本的加載順序,以便在ready回調中使用它之前定義function1

另外,我總是發現將ready回調定義為匿名方法然後命名為one更好。


當他們說“頁面的底部”時,他們並不意味著底部:他們的意思是在結束</body>標籤之前。 將腳本放在那裡,它們將在DOMReady事件之前加載; 之後放置它們並且DOM在它們被加載之前就已經準備好了(因為它在解析結束</html>標記時已經完成),你發現它將不起作用。

如果你想知道我怎麼知道這就是他們的意思:我曾在雅虎工作過! 我們把腳本放在</body>標籤之前:-)

編輯:另外,請參閱TJ Crowder的回复,並確保按正確順序排列。


繼@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 - 我正在努力'在運行回調之前加上幾秒延遲'我在其他線程中看到了。





jquery