国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOMContentLoaded與load的區別

niuxiaowei111 / 773人閱讀

摘要:所以所需要的時間必然大于等于所需要的時間。頁面的生命周期主要有三個重要的事件,已經構建好,可以對節點進行操作,所有資源加載完畢,可以對資源進行一系列操作,比如獲取圖片寬高等基本不會用到,當瀏覽器窗口關閉或者刷新時,會觸發事件。

DOMContentLoaded與load的區別

DOM 文檔的加載步驟

解析HTML結構

加載外部腳本和樣式表文件

解析并執行腳本

構建 HTML DOM模型 // DOMContentLoaded

加載外部資源文件(image等)

頁面渲染完成 // load

DOMContentLoaded (對應 jQuery 中的 $(document).ready())
MDN: 當初始的 HTML 文檔被完全加載和解析完成之后,DOMContentLoaded 事件被觸發,而無需等待樣式表、圖像和子框架的完成加載
load (對應 jQuery 中的 $(document).load())
頁面上所有的資源(圖片,音頻,視頻等)被加載以后才會觸發load事件。所以 load 所需要的時間必然大于等于 DOMContentLoaded 所需要的時間。
HTML 頁面的生命周期
主要有三個重要的事件

DOMContentLoaded, DOM已經構建好,可以對DOM節點進行操作

document.addEventListener("DOMContentLoaded", cb)

load,所有資源加載完畢,可以對資源進行一系列操作,比如獲取圖片寬高等~

window.onload = function() {}

beforeunload/unload(基本不會用到),當瀏覽器窗口關閉或者刷新時,會觸發beforeunload事件。當前頁面不會直接關閉,可以點擊確定按鈕關閉或刷新,也可以取消關閉或刷新。我們可以檢查用戶是否保存了修改,并提示他是否確定離開當前頁面

window.onbeforeunload = function() {
    return "There are unsaved changes. Leave now?";
}

相關知識點:document?.ready?State

原文鏈接: https://arronf2e.github.io/post/js-xue-xi-domcontentloaded-yu-load-de-qu-bie

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109720.html

相關文章

  • 事件DOMContentLoadedload區別

    摘要:區別是觸發的時機不一樣,先觸發事件,后觸發事件。文檔加載的步驟為解析結構。加載外部腳本和樣式表文件。解析并執行腳本代碼。在第步,觸發事件。可參考用原生可以這么寫不兼容老的瀏覽器,兼容寫法見中與事件,或用代碼代碼用這么寫代碼代碼 區別是:觸發的時機不一樣,先觸發DOMContentLoaded事件,后觸發load事件。 DOM文檔加載的步驟為 1,解析HTML結構。2,DOM樹構建完成。...

    Noodles 評論0 收藏0
  • 頁面生命周期:DOMContentLoaded, load, beforeunload, unloa

    摘要:所以有可能在所有腳本執行完畢后觸發。如果用戶即將離開頁面或者關閉窗口時,事件將會被觸發以進行額外的確認。狀態表示事件即將被觸發。總結頁面事件的生命周期事件在樹構建完畢后被觸發,我們可以在這個階段使用去訪問元素。 頁面生命周期:DOMContentLoaded, load, beforeunload, unload 原文地址:http://javascript.info/onload.....

    lx1036 評論0 收藏0
  • 頁面生命周期:DOMContentLoaded, load, beforeunload, unloa

    摘要:所以有可能在所有腳本執行完畢后觸發。如果用戶即將離開頁面或者關閉窗口時,事件將會被觸發以進行額外的確認。狀態表示事件即將被觸發。總結頁面事件的生命周期事件在樹構建完畢后被觸發,我們可以在這個階段使用去訪問元素。 頁面生命周期:DOMContentLoaded, load, beforeunload, unload 原文地址:http://javascript.info/onload.....

    luckyyulin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<