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

Question

I'm using image slide show in my site, but when i loading my site it take more time and initially page not look better one by one image. So, i want to load first loading image on the image slide and when div content is fully loaded then hide the loading image and display image slide show. so, hows this possible please help me. i'm not loading content from ajax. it's simple loading.

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

where loading-image is id of your loading indicatior, and content is id of your content container.

Answer 2

It depends what you want to display, a simple loading background image could be done like this:

before starting with loading your content you could set a class on your Div element.

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

in CSS you could have

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

after loading you can remove the class

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

if you want to display more markup (html, a div with text and an image ...) you will need to do the same but instead of using addClass() and removeClass , you would need to Show() and Hide() the other element.

Answer 3

您可以使用图像的onload事件，然后隐藏加载动画。

<img onload="hideLoadingDiv();">

Answer 4

This kind of depends on how you exactly are doing everything right now..

But this is about as simple as it gets:

http://jsfiddle.net/JTCpB/1/ Edit: Updated that loading image to something that.. makes sense.

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