加載所有背景圖像時顯示頁面

Question

我希望頁面和其中的內容僅在加載大背景圖像后才顯示。我嘗試了很多方法來做，但我找不到方法。 已經嘗試$（document）.ready-不起作用。

 body { padding: 0; margin: 0; background-color: #ffffff; width: 100%; overflow-x: hidden; background: url('images/dark.jpg'); background-attachment: fixed; background-size: cover; } 

Answer 1

您可以顯示帶有加載動畫的疊加層

<div id="preloader"></div>

#preloader 
{ 
    position: fixed; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background: #FFFFFF url('URL TO AN ANIMATED LOADING GIF') no-repeat center center; 
}

並將其設置為display: none加載所有內容后display: none

window.onload = function() {
    document.querySelector('#preloader').style.display = "none";
};

Answer 2

您可以在后台使用setTimeout函數顯示數據。

謝謝

Answer 3

嘗試這個：

您必須為每個圖像執行此操作。 例如：

$('selector_images').each(function(idx, img) {
    var img = $(img).attr('src', '/big_image.jpg')
.on('load', function() {
        if (!this.complete) {
            console.log('broken image!');
        } else {
            //Show content
        }
    });
});

希望這可以幫助！