JS 방법 :
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
Window.onload = function () {
var username = "Xiaoming";
경고 (사용자 이름);
}
</스크립트>
다음은 jQuery 메소드이며 jQuery 파일을 참조해야합니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
$ (document) .ready (function () {
var username = "Xiaoming";
경고 (사용자 이름);
});
</스크립트>
또는 약어
코드 사본은 다음과 같습니다.
$ (function () {
var username = "Xiaoming";
경고 (사용자 이름);
});
DOM이로드되면 (Window.onload보다 먼저) 실행할 수 있습니다. 같은 페이지에 여러 번 나타날 수 있습니다.
추신 : 둘 사이의 주요 차이점
Window.onload :
Window.onload 이벤트는 문서가 브라우저에 완전히 다운로드 된 경우에만 트리거됩니다. 즉, 페이지의 모든 요소가 JS 용으로 작동 할 수 있습니다. 즉, 페이지의 모든 요소가로드 된 후에 만 실행됩니다. 이 상황은 로딩 순서가 고려되지 않기 때문에 기능 코드를 작성하는 데 매우 유익합니다. ,,,
$ (document) .ready {} :
DOM이 완전히 준비되고 이용 가능하면 호출됩니다. 이것은 또한 모든 요소가 스크립트에 액세스 할 수 있음을 의미하지만 모든 관련 파일이 다운로드되었음을 의미하지는 않습니다. 다시 말해, HMTL 다운로드가 완료되고 DOM 트리로 구문 분석 된 후 코드가 실행됩니다.
예를 들어 보려면 :
갤러리를 나타내는 페이지가 있다고 가정합니다. jQuery를 통해 숨기거나 표시하거나 조작 할 수있는 많은 큰 이미지가 포함되어있을 수 있습니다. Onload 페이지를 통해 인터페이스를 설정하면이 페이지를 사용하기 전에 각 이미지가 다운로드 될 때까지 사용자가 기다려야합니다. 더 나쁜 것은, 동작이 기본 동작 (예 : 링크)이있는 요소에 약간 추가되면 사용자의 상호 작용으로 예상치 못한 결과가 발생할 수 있습니다. 그러나 $ (document) .ready () {}로 설정하려고하면이 인터페이스는 이전에 사용 가능한 올바른 동작을 준비합니다.
$ (document) .ready () {}를 사용하는 것은 일반적으로 이벤트 처리기를 시도하는 것보다 낫지 만 지원 파일이 아직 완료되지 않았기 때문에 이미지의 높이 및 너비와 같은 속성이 현재 유효하지 않을 수 있음을 분명히해야합니다.
참고 : 페이지 하단에 JS를 넣는 방법과 DEFER = "DEFER"를 사용하는 방법을 사용하는 데 문제가 있습니다. 위의 기능을 사용하는 것이 가장 좋습니다!