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

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

May 16, 2016 pm 05:09 PM
페이지 로딩

먼저 페이지 로딩 순서:
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으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

예제 색상 JSON 파일 예제 색상 JSON 파일 Mar 03, 2025 am 12:35 AM

예제 색상 JSON 파일

10 JQuery Syntax Highlighter 10 JQuery Syntax Highlighter Mar 02, 2025 am 12:32 AM

10 JQuery Syntax Highlighter

8 멋진 jQuery 페이지 레이아웃 플러그인 8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

8 멋진 jQuery 페이지 레이아웃 플러그인

자신의 Ajax 웹 응용 프로그램을 구축하십시오 자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

자신의 Ajax 웹 응용 프로그램을 구축하십시오

' this ' 자바 스크립트로? ' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

' this ' 자바 스크립트로?

10 JavaScript & JQuery MVC 자습서 10 JavaScript & JQuery MVC 자습서 Mar 02, 2025 am 01:16 AM

10 JavaScript & JQuery MVC 자습서

See all articles