HTML 페이지가 로드된 후 실행할 js 메소드 구현

이 글은 주로 HTML 페이지가 로드된 후 js를 실행하는 방법을 공유합니다. 주로 코드 방법을 공유하는 것이 도움이 되기를 바랍니다.

Js 메소드:

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

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()는 동일한 페이지에 여러 번 나타날 수 있습니다.

둘 사이의 주요 차이점은 다음과 같습니다. Window.onload=function (){}:

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

$(document).ready(function (){});

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

$(document).ready(function (){})를 사용하는 것이 일반적으로 onload 이벤트 핸들러를 사용하는 것보다 낫지만 지원 파일이 아직 로드되지 않았을 수 있으므로 명확해야 합니다. 따라서 비슷한 이미지의 높이와 높이는 현재로서는 너비가 유효하지 않을 수 있습니다.

참고: js를 페이지 하단에 배치하고 defer="defer"를 사용하면 문제가 발생합니다. $(document).ready(function (){}) 함수를 사용하는 것이 더 좋습니다.

관련 권장 사항:

HTML 페이지 로딩 속도 향상 소개

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