頁面加載問題的預加載器圖片

-1

我很抱歉提出一個很小的問題，但我覺得在這個問題上有點無奈。我在我的網頁加載在一個非常簡單的方式集成在一個預加載程序圖片頁面加載問題的預加載器圖片

HTML（股利加載預加載圖像）

<div class="se-pre-con"></div>

jQuery來觸發預加載頁面加載

$(window).load(function() { 
     // Animate loader off screen 
     $(".se-pre-con").fadeOut(); 
    });

有點造型。 CSS

<style> 
.no-js #loader { display: none; } 
.js #loader { display: block; position: absolute; left: 100px; top: 0; } 
.se-pre-con { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff; 
}

問題當頁面加載時，它濺起的預加載圖像之前的一次，然後將預加載程序圖片後加載完成其效果。理論上，預加載器應該在頁面加載之前顯示。我希望你們中的任何人都能弄清楚我在哪裏做錯了什麼？

問候

來源

2015-05-27 Malik Mudassar

給在CSS顯示圖像：無; – Andrew

謝謝@安德魯答覆如此之快，這個技巧確實提高了我的網頁加載速度，但現在我根本看不到預加載器。我在class .se-pre-con中放置了display：none，這是我的預加載器的div。我還有另外一個問題，如果你不問我，我可以在頁面卸載時顯示相同的預加載器，而不是在加載時顯示嗎？ –

我覺得你的HTML的格式不正確，你所提供的鏈接：

我會做的是確保HTML頁面有類似這樣的結構：

<html> 
    <head> 
    <script> 
    </script> 
    </head> 
    <body> 
     <div class="se-pre-con"></div> 
     <div class="site-content"></div> 
    </body> 
</html>

而且你的腳本標籤中有以下方法：

$(window).load(function() { 
    $(".site-content").show(); //or fadeIn (what ever suits your needs) 
    $(".se-pre-con").fadeOut(); 
});

而且在你的CSS確保您設置

.site-content{  
    display: none; 
}

編輯：（要隨時回答comment-調用裝載機你的問題）

我可能會創建一個函數是這樣的：

function toggleLoader(show){ 
    if(show == true){ 
     $(".se-pre-con").show(); 
     $(".site-content").fadeOut(); 
    } 
    else{ 
     $(".site-content").show(); 
     $(".se-pre-con").fadeOut(); 

    } 
}

然後在窗口負載你撥打：toggleLoader（假），

當你犯了一個要求電話：toggleLoader（真），

而當你收到響應電話：toggleLoader（假）。

來源

2015-05-27 09:50:22 EaziLuizi

這很有道理@ EaziLuizi，而是在預載入器淡出前顯示網站內容我可以在預載入器淡出後顯示網站內容嗎？ –

是的，當然，但我不會使用「淡入」然後，而是立即顯示「顯示」 – EaziLuizi

謝謝先生，不要介意我問一個愚蠢的問題，因爲我是一個緩慢的學習者。我可以在頁面加載和卸載中顯示預加載器圖像嗎？當前頁面加載顯示預加載器，但是當發送請求像搜索新憑證時，需要一點時間。如何在發送請求後立即顯示相同的預加載器映像 –

頁面內容也在頁面加載可見與裝配元件沿所以沒有任何序列內容加載第一，但是你可以通過下面的代碼馬槽，假設你有兩個DIV，一個pre-loader DIV另一個站點container格

<body> 
    <div class="se-pre-con"></div> 
    <div id="container" style="display: none;"> 
     <!-- site content here --> 
    </div> 
</body>

在container格添加display: none風格讓網站內容cant't在頁面加載閃爍..當頁面加載，那麼你可以show div容器，請參見下面的代碼

$(window).load(function() { 
     // Animate loader off screen 
     $("#container").show(); 
     $(".se-pre-con").fadeOut(); 
    });

來源

2015-05-27 09:47:16 Girish

剛剛通過您的頁面鏈接，並注意到display:none;被添加到.se-pre-con如下所示。請刪除display:none;屬性。它的作品好友！

.se-pre-con { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff; 
 
    display: none; 
 
}

來源

2015-05-27 10:00:03 obuliraj

是@ obuliraj。在安德魯告訴我的第一個答案中，我誤解了它並把它放在那裏。我只是編輯了它並在我的測試服務器上推送了更新。我的其他問題仍然與你和Girish和EaziLuizi相同，在頁面卸載時顯示預加載器是否合乎道德或我可以嗎？我的意思是這是否執行在頁面加載之間顯示預加載器的任務 –

頁面加載問題的預加載器圖片

回答

相關問題