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

Answer 5

default-mysql-client

Dockerfile

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

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

5 个答案: