show loading image until the content is fully loaded

I'm using image slide show in my site, but when i l开发者_StackOverflowoading 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.

---

$('#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.

---

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.

---

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

<img onload="hideLoadingDiv();">

---

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

---

  $(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>