亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

12345678_0001 2019-11-29 10:25:19
加載JavaScript文件時是否會觸發事件?出現問題是因為YSlow建議將JavaScript文件移動到頁面底部。這意味著 $(document).ready(function1)在function1加載包含其代碼的js文件之前會觸發該事件。如何避免這種情況?
查看完整描述

3 回答

?
慕標5832272

TA貢獻1966條經驗 獲得超4個贊

我沒有方便的參考,但是腳本標記是按順序處理的,因此,如果將您$(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變量以避免重復的通知。


查看完整回答
反對 回復 2019-11-29
?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

當他們說“頁面底部”時,它們并不是字面上的底部:它們是指在結束</body>標記之前。將您的腳本放在此處,它們將在DOMReady事件之前加載;然后放置它們,并且DOM在加載之前就已經準備就緒(因為</html>解析結束標記時已完成),您發現這將無法工作。

如果您想知道我的意思是什么:我曾在Yahoo!工作過。然后將腳本放在</body>標記之前:-)

編輯:另外,請參閱TJ Crowder的回復,并確保您按正確的順序放置東西。


查看完整回答
反對 回復 2019-11-29
?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

除了@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-我很想在其他線程中看到的“只是在運行回調之前增加幾秒鐘的延遲”。


查看完整回答
反對 回復 2019-11-29
  • 3 回答
  • 0 關注
  • 830 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號