調整窗口大小並准備好文檔

Question

所以我有一個幾乎全高的幻燈片的工作代碼：

$(window).resize(function() {
    var winHeight = $(window).height(); 
    var headerHeight = $(".navbar").height(); 
    $('#slideshow-wrapper, #slideshow, #slideshow .overlay, #slideshow #slogan-wrapper, #slideshow .overlay').height(winHeight - 145);
});

$(window).trigger('resize');

代碼有效，你可以在這里查看：

http://leda.rewind9.com/

如何將此代碼包裝在文檔就緒函數周圍，以避免瀏覽器在計算#slideshow 高度時出現初始閃爍？

我試過了：

$(document).ready(function() {
    $(window).resize(function() {
        var winHeight = $(window).height(); 
        var headerHeight = $(".navbar").height(); 
        $('#slideshow-wrapper, #slideshow, #slideshow .overlay, #slideshow #slogan-wrapper, #slideshow .overlay').height(winHeight - 145);
    });
    $(window).trigger('resize');
});

但閃爍不會消失。 為了重現該問題，只需重新加載頁面並檢查幻燈片文本在居中之前如何“掛起”。

有任何想法嗎？

謝謝！

Answer 1

好的，快速簡單的 jQuery 特定修復：

$(document).ready(function() {
 $('body').show();
});

只需確保將“display:none”添加到您的正文標簽中。 它有效，但讓我想知道如果 JS 被禁用會發生什么。