Search code examples
jqueryonclickpreloader

How I could add a preloader to load content div jquery?

Hi I have this jQuery to load content into a div with a button code, but the content you are loading includes images of much size and would like to appear as it is loaded in the div preload an animated gif, how could lead to out?

Code jquery:

function chargue(div, of)
{
$(div).load(of, function() {
});
}

The button:

<a href="#next" onClick="chargue('#left','change.php')">CHANGE</a>

CSS div #left:

#left {
    width: 744px;
    float: left;
    height: 100%;
    position:relative;
}
Solution

  • You can simply change to content of your div to an animated loading gif, then when your ajax get() is finished, replace your div content with the results.

    function chargue(div, of)
{
  //insert loading gif
  $(div).html('<img src="image/loading.gif">');

  //fetch larger images
  $.get(of, function(results) {
    $(div).html(results);
  });
}