顯示加載器圖像，直到完全加載背景圖像

我想實現一個加載器的背景圖像，直到整個圖像完全加載使用jQuery。我已經嘗試了各種方法來做到這一點。由於圖像是在CSS中指定的，我無法指定確切的圖像ID或類。最後，我最終這樣做，顯示加載器圖像，直到完全加載背景圖像

$(window).load(function() { 
    $(".loader").fadeOut("slow"); 
})

但是這樣做是在窗口加載時發生。我想發生它，直到圖像完全加載。和背景圖像來在以下部分

<div class="loader"></div> 
    <div class="test_banner services_banner"> 
</div>

這將是巨大的，如果有人伸出援助之手來管理這種情況。提前致謝。

來源

2016-09-29 Muneer Muhammed

考慮使用任何'lazyload'插件。沒有必要重新發明輪子。 – Aziz

請使用標記和CSS發佈完整示例（例如jsfiddle）。無法真正想象它是什麼樣子以及它應該是什麼樣子。 – Connum

從CSS獲取背景圖像，使用相同的文件名創建一個新的圖像，並且當它被加載時，刪除加載器等。 – adeneo

也許你可以使用多個背景圖像

例如：

div { 
 
    height:90vh; 
 
    width:90vw; 
 
    background:url(http://lorempixel.com/1200/800/nature/) center, 
 
    url(http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif) center center no-repeat ;/* this works once/untill image has been loaded */

<div></div>

的GIF背景仍然在這裏，但被塗成behi，D是大圖像。只要沒有加載大圖像就可以看到它......

來源

2016-09-29 14:27:40

注意到我抓住一個jquery插件的加載器gif線.... –

感謝您的幫助。我已經嘗試了你的建議。但是，在此之後，它會逐步顯示圖像加載。我想要的只是在完成加載後顯示主圖像。就像用圖像替換裝載機一樣。 –

顯示加載器圖像，直到完全加載背景圖像

回答

相關問題