HTML 페이지가 로드된 후 js를 실행하는 두 가지 방법

이 글에서는 HTML 페이지가 로드된 후 특정 js를 실행하는 두 가지 방법을 주로 소개합니다. 필요한 친구는

js 방법을 참조할 수 있습니다.

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

<script type="text/javascript"> 
window.onload=function(){ 
var userName="xiaoming"; 
alert(userName); 
} 
</script>

The 다음은 jQuery 메서드입니다. jQuery 파일을 참조해야 합니다.

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

<script type="text/javascript"> 

$(document).ready(function(){ 

var userName="xiaoming"; 

alert(userName); 
}); 

</script>

또는 약어

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

$(function(){ 
var userName="xiaoming"; 
alert(userName); 
});

dom이 로드될 때 실행될 수 있습니다(window.onload보다 이전). ). .ready()는 동일한 페이지에 여러 번 나타날 수 있습니다.

PS: 둘 사이의 주요 차이점

window.onload:

window.onload 이벤트는 문서가 브라우저에 완전히 다운로드될 때만 트리거됩니다. 이는 페이지의 모든 요소가 js에 대해 작동 가능하다는 것을 의미하며, 이는 페이지의 모든 요소가 로드될 때까지 실행되지 않음을 의미합니다. 이러한 상황은 로딩 순서를 고려할 필요가 없기 때문에 기능적 코드를 작성하는 데 매우 유리합니다. ,

$(document).ready{ }:

DOM이 완전히 준비되어 사용할 준비가 되면 호출됩니다. 이는 스크립트에서 모든 요소에 액세스할 수 있다는 의미이기도 하지만 모든 관련 파일이 다운로드되었다는 의미는 아닙니다. 즉, HMTL이 다운로드되어 DOM 트리로 구문 분석된 후에 코드가 실행됩니다.

예를 들어보세요:

갤러리를 나타내는 페이지가 있다고 가정해 보겠습니다. 이러한 종류의 페이지에는 jQuery를 통해 이러한 이미지를 숨기거나 표시하거나 조작할 수 있습니다. 온로드 페이지를 통해 인터페이스를 설정하는 경우 사용자는 이 페이지를 사용하기 전에 각 이미지가 다운로드될 때까지 기다려야 합니다. 더 나쁜 것은 기본 동작(예: 링크)이 있는 요소에 동작이 약간 추가되면 사용자 상호 작용으로 인해 예기치 않은 결과가 발생할 수 있다는 것입니다. 그러나 $(document).ready(){ }를 설정하려고 시도하면 인터페이스가 더 일찍 올바른 동작으로 준비될 것입니다.

$(document).ready(){ }를 사용하는 것이 일반적으로 onload 이벤트 핸들러를 시도하는 것보다 낫지만, 지원 파일이 아직 완료되지 않았을 수 있으므로 유사한 이미지의 높이와 높이가 너비와 같은 속성이라는 점을 분명히 해야 합니다. 현재로서는 유효하지 않을 수 있습니다.

참고: js를 페이지 하단에 배치하고 defer="defer"를 사용하면 문제가 발생합니다. 위의 기능을 사용하는 것이 더 좋습니다!

위 내용은 HTML 페이지가 로드된 후 js를 실행하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!