CODEWITHSUNDEEP
jquery
KANAYO AUGUSTIN UG
KANAYO AUGUSTIN UG

Reputation: 2188

adding an image before content loads using jquery

Please I am loading a page content on a div when its link is clicked so am running this code:

$(document).ready(function(){
    //loading the default content
    $('#content').load('contents/index.php');

    //loading page content of a clicked link
    $('#nav a').click(function(){
        page = $(this).attr('href');
        $('#content').load('content/'+page);
        return false;
    });
});

Now I need to add a loading image before the contents loads just like the ajax

beforeSend: function(){
    $('#load_div').html('<img src="loading_image.gig" />');
},

And to stop the image after loading the content

success: function(){
    $('#load_div').html();
},

So please how do I achieve this?

Upvotes: 0

Views: 51

Answers (2)

Jhecht
Jhecht

Reputation: 4435

My solution is very similar to Jai's, just that instead of an image I use a loader tag that momentarily blacks out the screen. I have a full demo at this Codepen, but the code below should work well enough.

I leverage the documents ajaxSend and ajaxComplete global events, so these events will now fire for any $.ajax() requests unless you specify in the call to not trigger the ajax events.

$(document).ready(function() {
  $(document).on('ajaxSend', function(e) {

    if ($('.loader-wrapper').length == 0) {
      var loader_wrapper = $('<div class="loader-wrapper"><div class="loader">&nbsp;</div></div>');
      console.log(loader_wrapper);
      $(document.body).prepend(loader_wrapper);
    }

    $('.loader-wrapper').show();

  }).on('ajaxComplete', function() {
    $('.loader-wrapper').hide();
  })

  $('#click-me').on('click', function() {
    $('#results').load('http://codepen.io/jhechtf/pen/XdQdaN.html');
  });
});
.loader-wrapper {
  overflow: none;
  position: absolute;
  margin: auto auto;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.loader {
  margin: auto auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(0, 0, 0, 0.2);
  border-right: 1.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
  Post stuff here
</div>
<button id="click-me">Click me</button>

Upvotes: 0

Jai
Jai

Reputation: 74738

You can use ajaxStart() method with usage of a callback in the .load(url, fn): 

function ajaxDone(){
   // remove the loading image here
   $('#load_div').html(''); // .empty(); // can also be used
}

$(document).ready(function(){
    //loading the default content
    $('#content').load('contents/index.php', ajaxDone); //<---use here to remove

    //loading page content of a clicked link
    $('#nav a').click(function(){
        page = $(this).attr('href');
        $('#content').load('content/'+page, ajaxDone); //<---use here to remove
        return false;
    });

    /*
     * Here you can use ajaxStart globaly when you have any async ajax call
     * It will show a loading gif image.
     */
    $(document).ajaxStart(function(){
        $('#load_div').html('<img src="loading_image.gig" />');
    });

});

Upvotes: 2

Related Questions