jQuery:내 요구 사항에 비해 너무 일찍 문서 준비가 완료되었습니다.

Question

저는 사진을 중심으로 한 사이트를 개발 중입니다.이 사이트의 일부 영역은 올바르게 작동하려면 이미지 크기를 기반으로 한 계산이 필요합니다.내가 발견한 것은 문서 준비가 너무 일찍 실행되고 결과적으로 내 GUI가 비정상적으로 작동한다는 것입니다.

나는 문서 준비 기능을 제거하고 그것을 좋은 'ol window.onload 기능으로 대체했습니다. 왜냐하면 제가 올바르게 읽으면 이미지가 완전히 로드될 때까지 이 기능이 실행되지 않기 때문입니다.

내 질문은 이것이 문제를 일으킬 것인가입니다.그리고 제가 놓친 다른 해결책이 있을까요?

도와주셔서 감사합니다!!

Answer 1

당신이 사용할 수없는 이유는 없습니다 $(window).load() 반대로 $(document.ready(). 이미지가 완전히로드 될 때까지 (또는로드하지 못한) 함수에 대해 정확합니다.

완전히 의존하는 단점 $(window).load() 어떤 경우에는 당신의 JavaScript 중 어느 것도 작동하지 않는 것이 쉽습니다 (즉 항해 또는 이벤트를 클릭하십시오) 페이지의 모든 단일 항목이로드 될 때까지. 웹 사이트의 고급 사용자 인 일부 사용자는 페이지를 매우 빠르게 클릭하여 전체 사용자 경험을 떨어 뜨립니다.

그만큼 행복한 매체 할 것입니다 사용 $(window).ready() 대부분의 상황에서 그리고 이벤트 만 내부에 넣습니다 $(window).load() 그것은 절대적으로 그들을 요구합니다.

Answer 2

대신 시도해보십시오.

$(window).load(function() {
 alert("images are loaded!");
});

비교를 위해이 링크를 참조하십시오 $(document).ready() 그리고 $(window).load()

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 3

그래도 window.onload 귀하의 필요에 맞게 작업 속도를 조금 높이는 것이 좋습니다.

$("img.load").load(function(){
    alert($(this).width());
});

이제 전체 요소 세트를 기다리지 않고 이미지가 로드되는 즉시 개별적으로 이미지를 처리할 수 있습니다.

Answer 4

매우 간단한 해결책은 다음과 같습니다.

포함 width="" 그리고 height="" 모든 이미지의 속성.이렇게 하면 이미지가 로드되기 전에도 브라우저가 모든 것을 올바르게 렌더링하게 됩니다.페이지 공간의 각 이미지에 필요한 공간은 이미지가 로드되는 동안 적절하게 확보됩니다.

그게 다야!

그렇게 하면, document.ready 귀하의 시나리오에서는 잘 작동합니다.무슨 일이 일어나고 있는지는 브라우저가 이미지를 검색/로드하기 전에 이미지의 크기를 알지 못하기 때문에 브라우저가 추측해야 한다는 것입니다.이로 인해 재미있는 동작이 발생할 수 있습니다.이미지의 너비와 높이를 지정하면 이 문제가 해결됩니다.

아무도 그 점을 언급하지 않았다는 사실에 놀랐습니다.반드시 자바스크립트 문제는 아니지만 cballou의 답변 확실히 좋은 조언입니다.

어쨌든, 새로운 것을 배웠기를 바랍니다.;)

Answer 5

당신은 사용할 수 있습니다 load() jQuery에서 이벤트, 그러나 문서에서는 요소가 이미로드 된 경우 예상대로 작동하지 않을 수 있습니다.

참고 :로드는 요소가 완전히로드되기 전에 설정 한 경우에만 작동합니다. 이것은 $ (document) .ready ()에서 발생하지 않으며, jQuery는 DOM이로드 된 후 설정할 때 예상대로 작동하도록 처리합니다. - http://docs.jquery.com/events/load

Answer 6

주어진 시간으로 지연하려면 "Settimeout"을 사용할 수 있습니다. :)