페이지를 열 때 jquery를 실행하는 방법

웹 개발에 jQuery를 사용할 때 페이지가 로드된 후 초기 표시 효과 설정, 특수 프롬프트 정보 표시 등 특정 작업을 자동으로 수행해야 하는 경우가 있습니다. 그렇다면 이 기능을 어떻게 구현해야 할까요? 이 기사에서는 페이지가 열릴 때 jQuery를 실행하는 방법을 소개합니다.

1. jQuery의 $(document).ready() 함수를 사용하세요

jQuery의 $(document).ready() 함수를 사용하는 것이 가장 일반적으로 사용되는 방법입니다. 이 함수는 DOM이 로드될 때 실행되도록 지시합니다. . 코드 예시는 다음과 같습니다.

$(document).ready(function() {
  //执行的代码
});

위 코드에서 보듯이 $(document).ready() 함수에 전달된 매개변수는 DOM이 로드된 후 실행되는 함수입니다. 이 함수 내에서 실행해야 하는 jQuery 코드를 작성할 수 있습니다.

2. jQuery의 window.onload() 함수를 사용하세요.

jQuery의 window.onload() 함수는 페이지의 모든 리소스(이미지, 스타일 시트 등 포함)가 로드될 때까지 실행되지 않습니다. $(document).ready() 함수에 비해 window.onload() 함수는 더 많은 내용을 포함하므로 실행 시간이 상대적으로 길어집니다. 코드 예시는 다음과 같습니다.

$(window).on('load', function() {
  //执行的代码
});

$(document).ready() 함수와 달리 window.onload() 함수의 코드는 모든 리소스가 로드될 때까지 실행되지 않습니다. 따라서 리소스가 실행되기 전에 로드될 때까지 기다려야 하는 일부 코드를 여기에 작성할 수도 있습니다.

3. 즉시 호출 기능 사용

위의 두 가지 방법 외에도 즉시 호출 기능을 사용하여 페이지가 로드된 후 자동으로 코드를 실행할 수도 있습니다. 함수를 즉시 호출한다는 것은 함수 본문을 괄호 안에 캡슐화하고 마지막으로 다른 괄호를 추가하여 함수를 실행하는 것을 의미합니다. 코드 예시는 다음과 같습니다.

(function() {
  //执行的代码
})();

위 코드에서 볼 수 있듯이 이 코드의 $(function(){})는 $(document).ready(function(){})와 동일합니다. 코드 내용이 작은 경우 이를 익명 함수로 캡슐화하여 실행하는 방법을 사용할 수 있습니다.

4. defer 속성을 사용하세요

외부 JavaScript 리소스를 페이지에 도입할 때 defer 속성을 사용하여 브라우저에 페이지 렌더링을 계속하고 실행하기 전에 JavaScript가 로드될 때까지 기다리도록 지시할 수 있습니다. 예를 들어 다음 코드는

<script src="xxxx.js" defer></script>

위 코드에서 외부 리소스 xxxx.js의 로드, 구문 분석 및 실행 프로세스는 페이지 렌더링에 영향을 미치지 않습니다. JavaScript가 로드되면 스크립트의 코드 실행이 완료될 때까지 구문 분석 대기열이 실행될 때까지 기다립니다.

5. 비동기 속성을 사용하세요

defer 속성과 달리 비동기 속성은 스크립트를 즉시 다운로드하여 실행해야 함을 나타냅니다. 그러나 스크립트를 실행하는 동안 문서 구문 분석을 중단하거나 다른 작업을 기다리지 않습니다. 로드하고 실행할 스크립트입니다. 네트워크 속도가 느리고 스크립트를 다운로드하고 구문 분석하는 데 시간이 걸리는 경우 페이지의 일부 요소가 로드되기 전에 스크립트가 실행되기 시작할 수 있습니다. 사용법은 다음과 같습니다.

<script src="xxxx.js" async></script>

위는 페이지를 열 때 jQuery를 실행시키는 방법에 대한 5가지 방법이며, 그 중 $(document).ready() 함수와 함수를 즉시 호출하는 방법이 가장 일반적으로 사용되는 방법입니다. 실제 사용에서는 필요에 따라 다양한 방법을 선택할 수 있습니다.

위 내용은 페이지를 열 때 jquery를 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!