等待内容完全加载后显示加载图像

Question

我在我的网站上使用图像幻灯片，但当我加载我的网站时，它需要更多的时间，并且最初页面不是一个一个图像看起来更好。因此，我希望在图像幻灯片上加载第一张加载图像，当div内容完全加载后隐藏加载图像并显示图像幻灯片。那么，这怎么可能，请帮帮我。 我没有从ajax加载内容。它只是简单地加载。

- tanujdave

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。

- Samich

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()来控制其他元素。

- Sander

Answer 3

这有点取决于你现在的具体操作方式...

但这是最简单的方法：

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

- Joonas

Answer 4

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

    .loader{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:url(https://texas-ppo-plans.com/p/img2/loading.gif) 50% 50% no-repeat #fff;opacity:.80;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is the working snippet example.

  <!--add this loader in your just start of the body tag-->
  <div class="loader">  </div><br><br>
   
   <!--this is the content area-->
    <a href="#">Home</a> |
    
    <a href="#">About</a>

- Ajit Kumar

Answer 5

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

<img onload="hideLoadingDiv();">

- PiTheNumber