페이지로드 후 jquery 코드를 수행하는 방법은 무엇입니까?
페이지에서 이벤트가 작동하도록하려면 $ (document) .ready () 함수 내에서 이벤트를 호출해야합니다. DOM이로드 되 자마자 페이지 내용이로드 되기 전에 그 안에있는 모든 것이 로드됩니다.
페이지 내용이로드 된 후에 만 자바 스크립트 코드를 작성하고 싶습니다. 어떻게해야합니까?
load
대신 사용 ready
:
$(document).load(function () {
// code here
});
업데이트.on()
jQuery 1.8부터 사용해야 합니다. ( http://api.jquery.com/on/ )
$(window).on('load', function() {
// code here
});
에서 이 대답 :
http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ 에 따르면 :
더 이상 사용되지 않는 이벤트 별칭 제거
.load
,.unload
,와.error
, jQuery를 1.8부터 사용되지 않습니다, 더 이상 없습니다..on()
리스너를 등록하는 데 사용 합니다.
수행원
$(document).ready(function() {
});
교체 가능
$(window).bind("load", function() {
// insert your code here
});
페이지로드 시간을 늘리는 데 사용하는 방법이 한 번 더 있습니다.
$(document).ready(function() {
$(window).load(function() {
//insert all your ajax callback code here.
//Which will run only after page is fully loaded in background.
});
});
편집 :이 코드는 모든 콘텐츠 (이미지 및 스크립트)가 완전히로드되고 브라우저에 렌더링 될 때까지 대기합니다.
내가 사용한 Javascript 가 서식 지정 및 요소 숨기기를위한 $(window).on('load',function(){ ... })
것이기 때문에 내 코드에 대해 너무 빨리 실행 되는이 문제 가 발생했습니다 . 너무 빨리 숨겨지고 높이가 0 인 요소입니다.
나는 지금 사용 $(window).on('pageshow',function(){ //code here });
하고 내가 필요로 할 때 발사됩니다.
나는 같은 문제를 찾고 있으며 여기에 도움이됩니다. 다음은 jQuery 버전 3.1.0이며 로드 이벤트는 jQuery 버전 1.8 이후로 더 이상 사용되지 않습니다 . 로드 이벤트가 jQuery 3.0에서 제거되었습니다. 대신 on 메서드를 사용하고 JavaScript로드 이벤트를 바인딩 할 수 있습니다.
$(window).on('load', function () {
alert("Window Loaded");
});
첫 번째 함수가 완료된 후 두 번째 함수를 실행하려면 this stackoverflow answer를 참조하십시오 .
이 안에 실행하려는 코드를 작성하십시오. 문서가 준비되면이 작업이 실행됩니다.
$(document).ready(function() {
});
아무도 이것을 언급하지 않았다
$(function() {
// place your code
});
약식 함수입니다.
$(document).ready(function() { .. });
이런 식으로 '$'에서 정의되지 않는 것을 피할 수 있습니다.
window.addEventListener("DOMContentLoaded", function(){
// Your code
});
편집 : 'DOMContentLoaded'를 사용하면로드 대기 페이지가 완전히로드되고 img가 포함되어 있기 때문에 '로드'보다 빠릅니다. 반면 DomContentLoaded는 구조 만 기다립니다.
참고URL : https://stackoverflow.com/questions/2926227/how-to-do-jquery-code-after-page-loading
'Development Tip' 카테고리의 다른 글
iOS 앱에서 Facebook 페이지 링크 열기 (0) | 2020.11.09 |
---|---|
{merge : true}를 사용한 세트와 업데이트의 차이점 (0) | 2020.11.09 |
Mongoid 설치 후 액티브 레코드 생성기를 사용하십니까? (0) | 2020.11.09 |
Elastic Beanstalk에서 https를 강제하는 방법은 무엇입니까? (0) | 2020.11.09 |
NA 만 포함하는 열을 삭제하는 방법은 무엇입니까? (0) | 2020.11.09 |