>웹 프론트엔드 >JS 튜토리얼 >페이지 로딩 및 js 함수 실행 onload 또는 Ready_jquery 분석

페이지 로딩 및 js 함수 실행 onload 또는 Ready_jquery 분석

WBOY
WBOY원래의
2016-05-16 17:09:281063검색

먼저 페이지 로딩 순서:
HTML 구조를 파싱합니다.
외부 스크립트 및 스타일시트 파일을 로드합니다.
스크립트 코드를 구문 분석하고 실행합니다.
HTML DOM 모델을 구성합니다.
이미지 등 외부 파일을 불러옵니다.
페이지가 로드되었습니다.

즉,
html → 머리글 → 제목 → #text(웹페이지 제목) → 스타일 → 스타일 로드 → 스타일 구문 분석 → 링크 → 외부 스타일 시트 파일 로드 → 외부 스타일 시트 구문 분석 → 스크립트 → 외부 스크립트 파일 로드→ 외부 스크립트 파일 구문 분석 → 외부 스크립트 실행 → body → div → 스크립트 → 스크립트 로드 → 스크립트 구문 분석 → 스크립트 실행 → img → 스크립트 → 스크립트 로드 → 스크립트 구문 분석 → 스크립트 실행 → 외부 이미지 파일 로드 → 페이지 초기화가 완료됩니다.

JS 초기 로딩.

onload
는 문서가 로드될 때 호출되지 않고 페이지의 모든 요소(이미지 등 포함)가 로드될 때 호출됩니다. 다운로드하는 데 시간이 오래 걸리는 대용량 이미지가 있는 경우 이미지가 로드될 때까지 스크립트를 초기화할 수 없습니다. 심각한 경우 사용자 경험에 큰 영향을 미치게 되지만, window.onload는 대부분의 경우 쓸모가 없습니다. 일부 B/S 소프트웨어에서는 사용자 관련 기능을 제공하기 전에 페이지를 완전히 로드해야 하므로 window.onload가 "로딩" 기능을 제공할 수 있거나 페이지 내용이 매우 작아서 document.ready()가 필요하지 않습니다. all;에 따라 다양한 상황에서 onload와 Ready를 적절하게 사용해야 합니다.

onload를 사용하여 로드:

코드 복사 코드는 다음과 같습니다.

창 .onload=function (){
var currentRenderer = 'javascript'; swfUrl: "Pie3D.swf",
swfUrl: " 290", height: "210",
          id: 'sampleChart', W3C에는 DOM(Document Object Model)이 로드될 때 트리거되는 DOMContentLoaded라는 이벤트가 있습니다.


방법 1:




코드 복사
코드는 다음과 같습니다.
Jquery의 $(function(){...}) $(document).ready(function(){...})(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]() };

try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout (arguments. callee, 0); }
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$ /.test (d.readyState))
clearInterval(t), run();
}, 0);
};
})();


호출 시 :
document.ready(function(){
Alert('ok');
}


방법 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 = function() {
if (this.readyState == 'complete') {
te();
} }
}
}
else if (/WebKit/i.test(navigator.userAgent )) { /Safari 브라우저인 경우(지원되지 않음)
/타이머를 생성하여 0.01초마다 확인하고 문서가 로드되면 초기화 메소드 호출
var _timer = setInterval( function() {
if (/loaded|complete/.test(document.readyState)) {
                                                                                                                                              위의 사항 중 어느 것도 해당되지 않는 경우 최악의 옵션을 사용하십시오(이 경우 Opera 7이 여기에서 실행됩니다)
window.onload = function( e) {
te();
}
}
function te(){
Alert('ok');
}


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.