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

Question

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

Thank you very much, can you show me an example of how you could implement it? — pTRONICA, Aug 05 '15 at 13:52

score 1 · Accepted Answer · answered Aug 05 '15 at 13:55

1

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

answered Aug 05 '15 at 13:55

Dustin Cochran

1,165
7
11

It seems to work well but can not see it because localhost load very quickly, could give time to display even a second? – pTRONICA Aug 05 '15 at 14:02
1

If you want to wait to show results, use `setTimeout(function(){ $(div).html(results); }, 1000);` instead of `$(div).html(results);`. Then adjust your time accordingly. – Dustin Cochran Aug 05 '15 at 14:08
One last thing that has happened to me, what to display with a fade in? And to parse the FB.XFBML.parse (document.getElementById ('comments-disk')); and twttr.widgets.load (); – pTRONICA Aug 05 '15 at 14:18
I managed to fix the rest, but do not load the twttr.widgets.load (); It's very weird – pTRONICA Aug 05 '15 at 14:32
Where is this `twttr.widgets.load ();` taking place? On the page you are loading in? Are any errors showing up in the console log? – Dustin Cochran Aug 05 '15 at 16:42
Dustin thanks for answering, look I opened a new question because in the end I could not integrate the three things with your code preload gif, stop by and take a look to see what can be failing. http://stackoverflow.com/questions/31836578/it-does-not-work-or-the-fade-in-and-load-the-twitter-widget-where-could-he-be-w – pTRONICA Aug 05 '15 at 17:11

score 1 · Answer 2 · edited Oct 27 '19 at 11:37

1

function chargue(div, of)
{ 
    $('#loader').show();
    $(div).load(of, function(response, status, xhr) { 
      if(status == 'success'){ 
        $('#loader').hide();
      }
   });
}

Please create one child div under #left div. And put your loader gif into that. Note: #loder div should be hide by default.

edited Oct 27 '19 at 11:37

Anis LOUNIS aka AnixPasBesoin

4,765
5
32
61

answered Aug 05 '15 at 13:59

Praful Rajput

367
3
12

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

2 Answers2