페이지 로드 완료 후 함수 실행
저는 페이지 로드 후 일부 문장을 실행하기 위해 다음 코드를 사용하고 있습니다.
<script type="text/javascript">
window.onload = function () {
newInvite();
document.ag.src="b.jpg";
}
</script>
하지만 이 코드는 제대로 작동하지 않습니다.일부 영상이나 요소를 로드하는 경우에도 함수가 호출됩니다.제가 원하는 것은 페이지가 완전히 로드된 함수를 호출하는 것입니다.
이것은 당신에게 도움이 될 것입니다:
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
아니면 당신이 jquery에 대해 편안하게 생각한다면,
$(document).ready(function(){
// your code
});
$(document).ready()DOM ContentLoaded에서 발생하지만 브라우저 간에 이 이벤트가 지속적으로 발생하지 않습니다.이것이 jQuery가 모든 브라우저를 지원하기 위해 몇 가지 까다로운 해결책을 구현할 가능성이 높은 이유입니다.그리고 이는 일반 자바스크립트를 사용하여 동작을 "정확하게" 시뮬레이션하는 것을 매우 어렵게 만들 것입니다. (물론 불가능한 것은 아닙니다.)
제프리 스위니와 J 토레스가 제안한 것처럼, 내 생각에 나는 그것을 가지고 있는 것이 더 좋다고 생각합니다.setTimeout아래와 같은 기능을 실행하기 전에 다음과 같이 기능을 실행합니다.
setTimeout(function(){
//your code here
}, 3000);
자바스크립트
document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});
jQuery에 대해서도 동일:
$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});
참고: - 아래 마크업을 사용하지 마십시오(다른 동종 선언을 덮어쓰기 때문에).
document.onreadystatechange = ...
페이지 로드가 "DOM 로드" 또는 "컨텐츠 로드" 중 어느 것을 의미하는지 약간 혼란스럽습니다.html 페이지에서 load는 두 가지 유형의 이벤트 후에 이벤트를 발생시킬 수 있습니다.
DOM 로드: 끝까지 보장합니다.로드된 전체 DOM 트리의 시작부터 끝까지 보장합니다.그러나 참조 내용을 로드하지는 않습니다.이미지를 추가했다고 가정합니다.
img태그, 그래서 이 이벤트는 모든 것을 보장합니다.img로드되었지만 이미지가 제대로 로드되지 않았거나 그렇지 않습니다.이 이벤트를 받으려면 다음과 같이 적어야 합니다.document.addEventListener('DOMContentLoaded', function() { // your code here }, false);또는 jQuery 사용:
$(document).ready(function(){ // your code });및 컨텐츠 로드 후: DOM 및 Content 로드도 나타냅니다DOM 및 Content 로드도 나타냅니다.그것은 보장할 뿐만 아니라
img태그를 지정하면 모든 이미지 또는 기타 상대적인 컨텐츠가 로드됩니다.이 이벤트를 받으려면 다음과 같이 적어야 합니다.window.addEventListener('load', function() {...})또는 jQuery 사용:
$(window).on('load', function() { console.log('All assets are loaded') })
jQuery를 사용할 수 있다면 load를 보십시오.그런 다음 요소를 로드한 후 함수를 실행하도록 설정할 수 있습니다.
예를 들어, 간단한 이미지가 있는 페이지를 생각해 보겠습니다.
<img src="book.png" alt="Book" id="book" />
이벤트 핸들러는 이미지에 바인딩될 수 있습니다.
$('#book').load(function() {
// Handler for .load() called.
});
현재 창에 있는 모든 요소를 로드해야 하는 경우 다음을 사용할 수 있습니다.
$(window).load(function () {
// run code
});
jQuery를 사용할 수 없는 경우 일반 자바스크립트 코드는 기본적으로 동일한 양의 코드입니다.
window.onload = function() {
// run code
};
html 페이지에서 js 함수를 호출하려면 onload 이벤트를 사용합니다.온로드 이벤트는 사용자 에이전트가 창 또는 FRAMESSET 내의 모든 프레임 로드를 완료할 때 발생합니다.이 속성은 BODY 및 FRAMESET 요소와 함께 사용할 수 있습니다.
<body onload="callFunction();">
....
</body>
내가 아는 한 당신이 가장 좋은 방법은
window.addEventListener('load', function() {
console.log('All assets loaded')
});
사용의 첫 번째 답은DOMContentLoaded모든 자산이 로드되기 전에 DOM이 로드되므로 이벤트는 한 단계 뒤로 이동합니다.
다른 답변은 추천합니다.setTimeout고객의 기기 성능과 네트워크 접속 속도에 전적으로 주관적이기 때문에 강하게 반대합니다.네트워크 속도가 느리거나 CPU 속도가 느린 경우 페이지를 로드하는 데 몇 초에서 수십 초가 걸릴 수 있으므로 시간을 예측할 수 없습니다.setTimeout필요할 것입니다.
에 관해서는readystatechange, 언제든지 발사됩니다.readyStateMDN에 따르면 여전히 이전에 있을 변화.load이벤트성의
완성하다
상태는 로드 이벤트가 발생하려고 함을 나타냅니다.
이렇게 하면 페이지가 이미 로드되었거나 로드되지 않은 경우 두 경우를 모두 처리할 수 있습니다.
document.onreadystatechange = function(){
if (document.readyState === "complete") {
myFunction();
}
else {
window.onload = function () {
myFunction();
};
};
}
jquery를 사용하지 않고 이렇게 시도할 수 있습니다.
window.addEventListener("load", afterLoaded,false);
function afterLoaded(){
alert("after load")
}window.onload = () => {
// run in onload
setTimeout(() => {
// onload finished.
// and execute some code here like stat performance.
}, 10)
}
또는 아래를 시도해 볼 수도 있습니다.
$(window).bind("load", function() {
// code here });
이것은 모든 경우에 효과가 있습니다.전체 페이지가 로드된 경우에만 트리거됩니다.
저는 다음 패턴을 사용하여 문서가 로딩되는지 확인하는 편입니다.이 함수는 문서가 로딩을 완료하면 해결되는 약속(IE를 지원해야 하는 경우 폴리필 포함)을 반환합니다.사용합니다.setInterval아래에 있는 이유는 비슷한 구현이setTimeout매우 깊은 스택을 생성할 수 있습니다.
function getDocReadyPromise()
{
function promiseDocReady(resolve)
{
function checkDocReady()
{
if (document.readyState === "complete")
{
clearInterval(intervalDocReady);
resolve();
}
}
var intervalDocReady = setInterval(checkDocReady, 10);
}
return new Promise(promiseDocReady);
}
물론 IE를 지원하지 않아도 되는 경우:
const getDocReadyPromise = () =>
{
const promiseDocReady = (resolve) =>
{
const checkDocReady = () =>
((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
let intervalDocReady = setInterval(checkDocReady, 10);
}
return new Promise(promiseDocReady);
}
이 기능을 사용하면 다음 작업을 수행할 수 있습니다.
getDocReadyPromise().then(whatIveBeenWaitingToDo);
제가 찾은 가장 좋은 답은 바로 그 다음에 "드라이버" 스크립트를 넣는 것입니다.</body>지휘.의 일부 솔루션보다 가장 쉽고 보편적일 수 있습니다.위의 일부 솔루션보다 가장 쉽고 아마도 더 보편적일 것입니다.
계획:제 페이지에는 테이블이 있습니다.저는 테이블이 있는 페이지를 브라우저에 작성한 후, JS로 분류합니다.사용자는 열 머리글을 클릭하여 이를 복원할 수 있습니다.
테이블이 끝난 후 a.</tbody>명령어, 본문이 종료되면 다음 줄을 사용하여 정렬 JS를 호출하여 3열로 테이블을 정렬합니다.웹에서 선별 스크립트를 받아서 여기서 재현하지 않습니다.적어도 내년에는 JS를 포함하여 운영 중인 이것을 볼 수 있습니다.static29.ILikeTheInternet.com를 클릭합니다 페이지 하단의 "여기"를 클릭합니다.그러면 표와 스크립트가 있는 또 다른 페이지가 나타납니다.데이터를 올린 다음 빠르게 정렬하는 것을 볼 수 있습니다.조금 더 속도를 내야 하는데 기본은 여기에 있습니다.
</tbody></body><script type='text/javascript'>sortNum(3);</script></html>
메이커마이키
jQuery를 이미 사용 중인 경우 다음을 시도해 볼 수 있습니다.
$(window).bind("load", function() {
// code here
});
페이지 로드 완료 후 함수 호출 설정 시간 초과
setTimeout(function() {
var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
for(var i, j = 0; i = ddl2.options[j]; j++) {
if(i.text == val) {
ddl2.selectedIndex = i.index;
break;
}
}
}, 1000);다음 jQuery를 사용해 보십시오.
$(function() {
// Handler for .ready() called.
});
본문 태그가 완료된 후 스크립트를 놓습니다.효과가 있습니다.
언급URL : https://stackoverflow.com/questions/11936816/execute-function-after-complete-page-load
'codememo' 카테고리의 다른 글
| "CSS"(style.php)의 전역 변수에 액세스 (0) | 2023.10.20 |
|---|---|
| SQLPlus에서 SPOL을 사용할 때 데이터 행 사이에 빈 줄이 표시됩니다. (0) | 2023.10.20 |
| WooCommerce 등록 양식에 사용자 정의 필드를 추가하는 방법 (0) | 2023.10.20 |
| 공식 파라미터란 무엇입니까? (0) | 2023.10.20 |
| 페이지 새로 고침 없이 ajax를 사용하여 acf_form을 저장하는 방법 (0) | 2023.10.20 |