显示正在加载图像，直到内容完全加载

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; }