document.readyState
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
Document.readyState 屿§æè¿°äºdocument çå è½½ç¶æã
å½è¯¥å±æ§å¼åçååæ¶ï¼ä¼å¨ document 对象ä¸è§¦å readystatechange äºä»¶ã
å¼
ä¸ä¸ªææ¡£ç readyState å¯ä»¥æ¯ä»¥ä¸ä¹ä¸ï¼
loadingï¼æ£å¨å è½½ï¼-
documentä»å¨å è½½ã interactiveï¼å¯äº¤äºï¼-
ææ¡£å·²è¢«è§£æï¼æ£å¨å è½½ç¶æç»æï¼ä½æ¯è¯¸å¦å¾åï¼æ ·å¼è¡¨åæ¡æ¶ä¹ç±»çåèµæºä»å¨å è½½ã
completeï¼å®æï¼-
ææ¡£åææåèµæºå·²å®æå è½½ã表示
loadç¶æçäºä»¶å³å°è¢«è§¦åã
示ä¾
>ä¸åçåå¤ç¶æ
js
switch (document.readyState) {
case "loading":
// è¡¨ç¤ºææ¡£è¿å¨å è½½ä¸ï¼å³å¤äºâæ£å¨å è½½âç¶æã
break;
case "interactive":
// ææ¡£å·²ç»ç»æäºâæ£å¨å è½½âç¶æï¼DOM å
ç´ å¯ä»¥è¢«è®¿é®ã
// 使¯åå¾åï¼æ ·å¼è¡¨åæ¡æ¶çèµæºä¾ç¶è¿å¨å è½½ã
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// 页颿æå
容é½å·²è¢«å®å
¨å è½½ã
let CSS_rule = document.styleSheets[0].cssRules[0].cssText;
console.log(`The first CSS rule is: ${CSS_rule}`);
break;
}
模æ DOMContentLoaded äºä»¶ç readystatechange
js
// 模æ DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
};
模æ load äºä»¶ç readystatechange
js
// 模æ load äºä»¶
document.onreadystatechange = function () {
if (document.readyState === "complete") {
initApplication();
}
};
å¨ DOMContentLoaded ä¹åä½¿ç¨ readystatechange ä½ä¸ºäºä»¶å¤çç¨åºä»¥æå ¥æä¿®æ¹ DOM
document.addEventListener('readystatechange', event => {
if (event.target.readyState === 'interactive') {
initLoader();
}
else if (event.target.readyState === 'complete') {
initApp();
}
});
è§è
| è§è |
|---|
| HTML > # current-document-readiness > |
æµè§å¨å ¼å®¹æ§
åè§
- ç¸å ³äºä»¶ï¼