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

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.

我在我的网站上使用图片幻灯片放映,但是当我加载我的网站时,它需要更多的时间,并且最初页面看起来不是一个一个更好的图像。因此,我想在图像幻灯片上加载第一个加载图像,当div内容完全加载时,隐藏加载图像并显示图像幻灯片放映。所以,这有可能请帮助我。我没有从ajax加载内容。这是简单的装载。

4 个解决方案

#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.

其中loading-image是加载指示符的id,内容是内容容器的id。

#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.

在开始加载内容之前,您可以在Div元素上设置一个类。

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

in CSS you could have

在CSS中你可以拥有

#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.

如果你想显示更多的标记(html,带有文本和图像的div ......)你需要做同样的事情,而不是使用addClass()和removeClass,你需要Show()和Hide()其他元素。

#3

You can use the onload event of an image and then hide your loading animation.

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

<img onload="hideLoadingDiv();">

#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.

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

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