사용자가 페이지와 상호 작용할 때까지 Opera가 때때로 jquery 기능을 무시합니다.

Question

나는 오페라에서 매우 이상한 버그를 발견했습니다. 다음 코드를 확인하십시오 :

$(document).ready(function(){ 
    var $imgHeight = $('.collection-item-image').width()/3 * 4; 
    $('.collection-item-holder').css('padding-top',$imgHeight + 'px'); 

    $(window).resize(function(){ 
     var $imgHeight = $('.collection-item-image').width()/3 * 4; 
     $('.collection-item-holder').css('padding-top',$imgHeight + 'px'); 
    }); 
}); 

가끔 오페라는 문서를 실행할 때 코드를 무시합니다. 다른 모든 브라우저는 정상적으로 실행됩니다. 나는 문서를 모두 준비하는 것을 무시하고 있을지도 모른다고 생각했지만, 경고 기능을 사용하여 테스트 한 결과, 매번 작동하는 것으로 나타났습니다. 정상적인 문서 준비 상태에서 가끔씩 무시되지만, 함수가 실행되기 전에 경고를 추가하면 경고 상자에서 "확인"을 누르면 코드가 매번 잘 실행됩니다. 어떤 이유로 사용자가 페이지와 상호 작용하여 실행해야하는 경우가 있습니다.

누구나 왜이 문제를 수정하거나 해결할 수있는 이유가 무엇인지 알 수 있습니까? 이 방법으로 CSS를 설정할 때만 이것이 일어나는 것처럼 보입니다. 그리고 창 크기를 조정하면 코드가 완벽하게 실행되고 필요한대로 표시됩니다.

Answer 1

이 문제의 원인은 무엇인지 잘 모르지만 window.load() 내부의 함수를 래핑하면 문제가 분류됩니다.

Answer 2

는 documentation에 따르면 ") (.ready에 전달 핸들러는 DOM이 준비 후 실행되도록 보장, 그래서 이것은 일반적으로 다른 모든 이벤트 핸들러를 연결하고 다른 jQuery 코드를 실행하는 가장 좋은 장소입니다. CSS 스타일 속성의 가치에 의존하는 스크립트를 사용하여 스크립트를 참조하기 전에 외부 스타일 시트를 참조하거나 스타일 요소를 포함하는 것이 중요합니다. "

즉,이 페이지의 구조이 준비되면 바로 실행됩니다. 전체 페이지 (이미지, 외부 링크)가로드 될 때가 아닙니다. 때로는라고 말하기 때문에 이미지가 매우 빠르게로드되거나 캐시에서로드 될 때 아마도 경쟁 조건 일 수 있습니다. DOM 준비 이벤트가 발생하면 이이 될 수 있습니다. 귀하의 경우에는 페이지의 모든 미디어가로드되었을 때 적절한 이벤트가 발생합니다.