僅顯示預加載程序一次而不顯示正文內容

我的頁面上有一個預加載程序，只有當您第一次進入某個站點時纔會顯示該加載程序。它幾乎可以工作，但是當我第一次進入我的網站時，我看到網站的內容爲0.5，然後纔是我的預加載器。但我不想立即看到內容。我只想在我的預加載器淡出時才能看到它。我該怎麼做？僅顯示預加載程序一次而不顯示正文內容

父母div需要成爲flexbox。

<div id="over"> 
    <img src="sourse.jpg" class="pic"> 
</div>

#over { 
display: none; 
z-index: 10000000000; 
position: fixed; 
left: 0; 
top: 0; 
right: 0; 
bottom: 0; 
background-color: black; 
} 

.pic{ 
margin: auto; 
}

if (sessionStorage.getItem('dontLoad') == null){ 
    $("#over").css("display", "flex"); 
    $("#over").delay(3500).fadeOut(1800); 
    $(".pic").delay(2500).fadeOut(2300); 
    sessionStorage.setItem('dontLoad', 'true'); 
}

來源

2016-06-16 Nick Vlasov

當你加載這個JS？如果它是在你的內容之後，而不是第一個加載的東西，你將會首先看到這個HTML。 – axhi

將'style ='display：none'添加到您的主要內容（而不是#over）。你看到的是你得到的標準* fouc *，因爲你的js在加載所有東西后運行。 –

加載它沒有區別。我嘗試了很多選擇，但我總是先看到我的內容:( –

您需要設置一個回調的預加載動畫完成後，再展示的內容。在我看來，如果你需要父div是一個flexbox，你可以嘗試使用visibility:hidden;來隱藏內容，而不是將其設置爲display:none;。

CSS

#over { 
display: flex; 
visibility:hidden; 
z-index: 10000000000; 
position: fixed; 
left: 0; 
top: 0; 
right: 0; 
bottom: 0; 
background-color: black; 
}

if (sessionStorage.getItem('dontLoad') == null){ 

    $(".pic").delay(2500).fadeOut(2300, function(){ 
    $("#over").animate({ 
     visibility: visible 
    }, 3500); 
    }); 
    sessionStorage.setItem('dontLoad', 'true'); 
}

來源

2016-06-16 23:06:42 Bellu

僅顯示預加載程序一次而不顯示正文內容

回答

相關問題