不同高度的元素取決於頁面加載

我正在開發一個網站，我使用jQuery來實現虛擬列效果。這裏是一個測試頁面：http://goo.gl/IL3ZB。左邊的黃色<aside>高度設置在java腳本中，高度爲.body_container div。顯示器的高度設置正確。不同高度的元素取決於頁面加載

問題是，當我在Firefox 17中進行全屏刷新（Shift + F5）時，<aside>顯示正確，高度正確，但js中的動畫看到的高度更小。當我通常刷新頁面時，那麼Java腳本也會看到正確的高度。

我該如何解決這個問題？

這裏是我的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()錯誤計算（計算中有時會發生正確當瀏覽器從緩存中獲取圖像時）。最簡單的解決方案是將$(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

不同高度的元素取決於頁面加載

回答

相關問題