페이지로드에 따라 요소 높이가 다릅니다

가짜 열 효과를 얻기 위해 jQuery를 사용하는 사이트를 개발하고 있습니다. 테스트 페이지는 http://goo.gl/IL3ZB입니다. 왼쪽 노란색 <aside> 높이는 자바 스크립트에서 .body_container div의 높이로 설정됩니다. 높이가 올바르게 표시되도록 설정되어 있습니다.페이지로드에 따라 요소 높이가 다릅니다

Firefox 17에서 완전히 새로 고침 (Shift + F5) 할 때 문제가 발생합니다. 정확한 높이와 함께 <aside>이 올바르게 표시되지만 js의 애니메이션은 훨씬 작은 높이를 보게됩니다. 다음 정상적으로 페이지를 새로 고칠 때 자바 스크립트 또한 올바른 높이를 볼 수 있습니다.

이 문제를 어떻게 해결할 수 있습니까?

이

var floating_patents_bottom = 0; 


$(window).load(function(){ 
    $('.floating_patents').height($('.body_container').height() ); 
    floating_patents_bottom = ($('.body_container').height() > floating_patents_bottom ? $('.body_container').height() : floating_patents_bottom); 
    var toBottom = { 
     'top': floating_patents_bottom 
    }; 
}); 

var toTop = { 
    'position': 'absolute', 
    'top': '500px', 
    'display': 'none' 
}; 

$(document).ready(function(){ 
    $('.floating_patents').height($('.body_container').height() ); 
    floating_patents_bottom = ($('.body_container').height() > floating_patents_bottom ? $('.body_container').height() : floating_patents_bottom); 
// floating_patents_bottom = $('.floating_patents').height(); 

    var toBottom = { 
     'top': floating_patents_bottom 
    }; 

    var patents = $(".floating_patents img"); 
    patents.css(toTop); 

    patents.each(function(index) { 
     $(this).delay(index * 5000).css('margin','10px auto').fadeIn("slow").animate(toBottom , 15000, function(){ 
      $(this).fadeOut("slow"); 
       }); 
    }); 
});

출처

2012-11-20 Robert Niestroj

은 '$ ('. body_container '). height()'를 두 번 이상 호출하지 마십시오. 당신이 그것을 호출 할 때마다, 브라우저는 값을 얻기 위해 DOM을 검색해야만합니다. 단지 한 번만 검색하는 대신 수많은 검색을 수행하고 있습니다. – charlietfl

이 문제는 핸들러 $(document).ready 콘텐츠에 이미지를 호출 할 때 당신의 $('.body_container').height()이 잘못 계산 때문에 완전히로드되지 않은 제로 크기를 가지고있다 (계산 가끔 제대로 일 : 여기

내 JS입니다 브라우저가 캐시에서 이미지를 가져올 때). 가장 쉬운 해결책은 $(window).load 처리기 내부의 모든 코드를 이동하는 것입니다. 그 모든 요소가로드되기 전에

function floatingPatents() { 
    // find required elements in DOM 
    var patentsBlock = $('.floating_patents'), bodyContainer = $('.body_container'); 
    var patents = patentsBlock.find('img').hide(); 
    var floating_patents_bottom = 0; 

    // wait for complete page load 
    $(window).load(function(){ 
     // resize holder 
     floating_patents_bottom = bodyContainer.height(); 
     patentsBlock.height(floating_patents_bottom); 

     // calculate offsets 
     var toTop = { 
      position: 'absolute', 
      top: '500px', 
      display: 'none' 
     }; 
     var toBottom = { 
      top: floating_patents_bottom 
     }; 

     // start animation 
     patents.show().css(toTop).each(function(index) { 
      $(this).delay(index * 5000).css('margin','10px auto').fadeIn("slow").animate(toBottom , 15000, function(){ 
       $(this).fadeOut("slow"); 
      }); 
     }); 
    }); 
} 

// run code when page ready 
$(floatingPatents);

출처

2012-11-20 22:49:46 Inferpse

Thx 코드가 작동합니다. 두 답이 모두 정확합니다. 코드 예제로 인해 하나를 선택합니다. –

문서가 준비 : 작동

약간의 리팩토링 코드입니다. $(window).load 이벤트에서 정확한 높이를 얻었지만 $(document).ready 이벤트에서 애니메이션을 초기화하고 있습니다. 모든 것을 $(window).load으로 옮기면 좋을 것입니다.

로드가 완료 될 때까지 기다리는 것이 너무 길면 (그렇지 않은 경우 .body-container div의 적절한 높이를 얻을 수 없으므로)이 기술을 사용하여 이미지의 자리 표시자를 가져올 수 있습니다 , 실제로로드되기 전에 흐름이 올바른지 확인하십시오. http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

출처

2012-11-20 22:52:37 iabw

페이지로드에 따라 요소 높이가 다릅니다

답변

관련 문제