亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

DOMContentLoaded與load的區(qū)別

niuxiaowei111 / 834人閱讀

摘要:所以所需要的時(shí)間必然大于等于所需要的時(shí)間。頁(yè)面的生命周期主要有三個(gè)重要的事件,已經(jīng)構(gòu)建好,可以對(duì)節(jié)點(diǎn)進(jìn)行操作,所有資源加載完畢,可以對(duì)資源進(jìn)行一系列操作,比如獲取圖片寬高等基本不會(huì)用到,當(dāng)瀏覽器窗口關(guān)閉或者刷新時(shí),會(huì)觸發(fā)事件。

DOMContentLoaded與load的區(qū)別

DOM 文檔的加載步驟

解析HTML結(jié)構(gòu)

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

解析并執(zhí)行腳本

構(gòu)建 HTML DOM模型 // DOMContentLoaded

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

頁(yè)面渲染完成 // load

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

DOMContentLoaded, DOM已經(jīng)構(gòu)建好,可以對(duì)DOM節(jié)點(diǎn)進(jìn)行操作

document.addEventListener("DOMContentLoaded", cb)

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

window.onload = function() {}

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

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

相關(guān)知識(shí)點(diǎn):document?.ready?State

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

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/109720.html

相關(guān)文章

  • 事件DOMContentLoadedload區(qū)別

    摘要:區(qū)別是觸發(fā)的時(shí)機(jī)不一樣,先觸發(fā)事件,后觸發(fā)事件。文檔加載的步驟為解析結(jié)構(gòu)。加載外部腳本和樣式表文件。解析并執(zhí)行腳本代碼。在第步,觸發(fā)事件??蓞⒖加迷梢赃@么寫(xiě)不兼容老的瀏覽器,兼容寫(xiě)法見(jiàn)中與事件,或用代碼代碼用這么寫(xiě)代碼代碼 區(qū)別是:觸發(fā)的時(shí)機(jī)不一樣,先觸發(fā)DOMContentLoaded事件,后觸發(fā)load事件。 DOM文檔加載的步驟為 1,解析HTML結(jié)構(gòu)。2,DOM樹(shù)構(gòu)建完成。...

    Noodles 評(píng)論0 收藏0
  • 頁(yè)面生命周期:DOMContentLoaded, load, beforeunload, unloa

    摘要:所以有可能在所有腳本執(zhí)行完畢后觸發(fā)。如果用戶即將離開(kāi)頁(yè)面或者關(guān)閉窗口時(shí),事件將會(huì)被觸發(fā)以進(jìn)行額外的確認(rèn)。狀態(tài)表示事件即將被觸發(fā)。總結(jié)頁(yè)面事件的生命周期事件在樹(shù)構(gòu)建完畢后被觸發(fā),我們可以在這個(gè)階段使用去訪問(wèn)元素。 頁(yè)面生命周期:DOMContentLoaded, load, beforeunload, unload 原文地址:http://javascript.info/onload.....

    lx1036 評(píng)論0 收藏0
  • 頁(yè)面生命周期:DOMContentLoaded, load, beforeunload, unloa

    摘要:所以有可能在所有腳本執(zhí)行完畢后觸發(fā)。如果用戶即將離開(kāi)頁(yè)面或者關(guān)閉窗口時(shí),事件將會(huì)被觸發(fā)以進(jìn)行額外的確認(rèn)。狀態(tài)表示事件即將被觸發(fā)??偨Y(jié)頁(yè)面事件的生命周期事件在樹(shù)構(gòu)建完畢后被觸發(fā),我們可以在這個(gè)階段使用去訪問(wèn)元素。 頁(yè)面生命周期:DOMContentLoaded, load, beforeunload, unload 原文地址:http://javascript.info/onload.....

    luckyyulin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<