먼저 페이지 로딩 순서는 다음과 같습니다.
HTML 구조를 구문 분석합니다.
외부 스크립트 및 스타일시트 파일을 로드합니다.
스크립트 코드를 구문 분석하고 실행합니다.
HTML DOM 모델을 구축합니다.
이미지와 같은 외부 파일을 로드합니다.
페이지가 로드됩니다.
즉:
html → 헤드 → 제목 → #text(웹페이지 제목) → 스타일 → 스타일 로드 → 스타일 구문 분석 → 링크 → 외부 스타일 시트 파일 로드 → 외부 스타일 시트 구문 분석 → 스크립트 → 외부 스크립트 파일 로드 → 외부 스크립트 파일 구문 분석 → 외부 스크립트 실행 → body → div → 스크립트 → 스크립트 로드 → 스크립트 구문 분석 → 스크립트 실행 → img → 스크립트 → 스크립트 로드 → 스크립트 구문 분석 → 스크립트 실행 → 외부 이미지 파일 로드 → 페이지 초기화가 완료되었습니다.
JS의 초기 로딩.
온로드
문서가 로드될 때는 호출되지 않지만 페이지의 모든 요소(이미지 등 포함)가 로드될 때 호출됩니다. 페이지에 큰 크기의 이미지가 있고 다운로드하는 데 시간이 오래 걸리는 경우 스크립트는 초기화하면 이미지 로딩이 완료될 때까지 심각한 경우 사용자 경험에 큰 영향을 미칠 수 있습니다. 그러나 window.onload는 많은 경우에 페이지를 요구합니다. 사용자 관련 기능을 제공하기 전에 완전히 로드되므로 window .onload "로딩" 기능을 제공할 수 있거나 페이지 내용이 매우 작으며 상황에 따라 document.ready()가 전혀 필요하지 않으므로 onload 및 Ready를 합리적으로 사용해야 합니다.
onload를 사용하여 다음을 로드합니다.
다음과 같이 코드 코드를 복사합니다.
window.onload=함수(){
var currentRenderer = 'javascript';
FusionCharts.setCurrentRenderer(currentRenderer);
var ChartObj = 새로운 FusionCharts({
swfUrl: "Pie3D.swf",
너비: "290", 높이: "210",
ID: '샘플차트',
데이터 소스: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}}",
데이터 형식: FusionChartsDataFormats.XMLURL,
renderAt: 'chart1div'
}).세우다();
}
준비가 된
W3C에는 DOM(Document Object Model)이 로드될 때 트리거되는 DOMContentLoaded라는 이벤트가 있습니다.
방법 1:
다음과 같이 코드 코드를 복사합니다.
Jquery의 $(function(){...}) $(document).ready(function(){...}) 과 유사합니다.
(기능 () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i]() };
var d = 문서;
d. 준비 = 함수(f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) 반환;
만약 (즉)
(기능 () {
try { d.documentElement.doScroll('left'); run() }
catch (err) { setTimeout(arguments.callee, 0) }
})();
그렇지 않으면 (주)
var t = setInterval(함수 () {
if (/^(loaded|complete)$/.test(d.readyState))
ClearInterval(t), run();
}, 0);
};
})();
전화할 때:
document.ready(함수(){
경고('확인');
}
방법 2:
다음과 같이 코드 코드를 복사합니다.
/W3C DOM2가 지원되는 경우 W3C 방법을 사용합니다.
if (document.addEventListener){
document.addEventListener("DOMContentLoaded", te, false);
}
else if (/MSIE/i.test(navigator.userAgent)){/IE 브라우저인 경우(지원되지 않음)
/defer 속성이 있고 문서가 로드될 때 로드되는 스크립트 태그를 만듭니다.
document.write("
var script = document.getElementByIdx_x("__ie_onload");
/문서가 실제로 로드되면 초기화 메소드를 호출합니다.
script.onreadystatechange = 함수() {
if (this.readyState == '완료') {
테();
}
}
}
else if (/WebKit/i.test(navigator.userAgent)) {/Safari 브라우저인 경우(지원되지 않음)
/타이머를 생성하고 0.01초마다 확인하고 문서가 로드되면 초기화 메서드를 호출합니다.
var _timer = setInterval( function() {
if (/loaded|complete/.test(document.readyState)) {
ClearInterval(_timer);
테();
}
}, 10);
}
else {/위의 항목 중 어느 것도 없으면 최악의 방법을 사용하십시오(이 경우 Opera 7이 여기에서 실행됩니다).
window.onload = 함수(e) {
테();
}
}
함수(){
경고('확인');
}