顯示正在加載圖像，直到內容完全加載

Question

我在我的網站中使用圖像幻燈片放映，但是當我加載我的網站時，它需要更多時間，並且最初頁面看起來並不是一張一張的圖像。所以，我想加載圖像幻燈片上的第一個加載圖像，當div內容被完全加載，然後隱藏加載圖像和顯示圖像幻燈片放映。所以，這可能請幫助我。 我未加載ajax的內容。它是簡單的加載。

Answer 1

$('#loading-image').show(); // show loading image before request 
$('#content').load('my-content-source.php', function() { // load content 
    $('#loading-image').hide(); // hide image after content was loaded 
}); 

其中loading-image是你的加載ID indicatior，並content是你的內容容器的ID。

Answer 2

這取決於你想顯示什麼， 一個簡單的加載背景圖片可以做這樣的：

與加載你的內容，你可以你的Div元素上設置一個類開始之前。

$('#myDiv').addClass('loading'); 

在CSS，你可以裝載你可以刪除課後有

#myDiv { width: 100px; height; 100px; } 
#myDiv.loading { background: url(loading.gif) no-repeat center center; } 

$('#myDiv').load("http://www.mypage.com/contentToLoad.php", function(){ 
    $('#myDiv').removeClass('loading'); 
}); 

如果你想顯示更多的標記（HTML，文本和圖像的DIV

...） 你將需要做同樣的事情，但不是使用addClass()和removeClass，你需要Show()和Hide()另一個元素。

Answer 3

您可以使用圖像的onload事件，然後隱藏您的加載動畫。

<img onload="hideLoadingDiv();"> 

Answer 4

這種要看你究竟是現在做的一切..

但這是一樣簡單，因爲它得到：

http://jsfiddle.net/JTCpB/1/編輯：更新了加載圖像有意義的東西。

<div id="load"> 
    <img src="http://lorempixum.com/g/400/200/" alt="" /> 
</div> 

#load { 
    width: 400px; 
    height: 200px; 
    background: url("loading.gif") no-repeat center center; }