窗口大小調整和記錄準備

所以我有一個幾乎全高幻燈片此工作代碼：窗口大小調整和記錄準備

$(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'); 
});

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

任何想法？

謝謝！

來源

2015-11-03 Johann

給你的容器一些最小高度 - 這將防止任何閃爍。它本質上是不可避免的，因爲JS在加載後立即執行，這意味着它可能會稍微延遲。只要確保在CSS中設置回退高度（例如，'80vh'）即可。如果你設置'height'屬性，JS會覆蓋它。 – somethinghere

我認爲問題在於執行腳本時圖像無法加載。嘗試使用'$（window）.on（'load'）'代替它，它將等待加載頁面中的所有資源以執行其中的代碼。 –

@somethinghere給容器一種修復問題的高度（它使得閃爍不那麼明顯）。事情是，這是有點難過，沒有解決這個問題。 – Johann

-1

好，方便快捷的jQuery具體的解決辦法：

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

只要確保添加「顯示：無」到你的身體標記。它的工作，但讓我想知道如果JS被禁用會發生什麼。

來源

2015-11-04 01:32:40 Johann

窗口大小調整和記錄準備

回答

相關問題