0

I'm loading content into a div using jquery, the content is loaded with a preload gif but this disappears before you load the social buttons facebook comments and images that will load content, I would like the image gif remain until all the content is loaded. I leave my code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></script>

<script>

var disc = function(div,of){
$(div).html("<img src='loading.gif' id='load'>");
var ajax = $.ajax({url : of, type : "GET"});
ajax
.done(function(response){
Commons.sorDone(div, response);
FB.XFBML.parse(document.getElementById('redes'));
twttr.widgets.load();
})
.fail(function(){
Commons.sorFail(div);
});
}
Commons = {

sorDone : function (div, response) {
$(div)  
.html(response)
    },
}

</script>
</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.4&appId=578756807601583";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="lateral">
      <a href="#inicio" onClick="disc('#content-right','1968.php')" >road</a>
      <a href="#inicio" onClick="disc('#content-right','1969.php')" >street</a>
      <a href="#inicio" onClick="disc('#content-right','1970.php')" >house</a>
      <a href="#inicio" onClick="disc('#content-right','1971.php')" >mouse</a>
      <a href="#inicio" onClick="disc('#content-right','1972.php')" >usa</a>
      <a href="#inicio" onClick="disc('#content-right','1973.php')" >parking</a>
      <a href="#inicio" onClick="disc('#content-right','1974.php')" >red</a>
      <a href="#inicio" onClick="disc('#content-right','1975.php')" >black</a>
      <a href="#inicio" onClick="disc('#content-right','1976.php')" >green</a>

</div>
<div id="content-right">
</div>
</body>
</html>

Example of content you want to load, are all more or less the same with some differences, but all include comments facebook, images and text.

1968.php

<div id="description">
<span class="informacion">The group</span> <br>



   <p class="text"><div class="picture left" style="width:266px;"> 
<img src="road.jpg" alt= width="266" height="266" />
road street
</div></p>
  <p class="text"><div class="picture left" style="width:266px;"> 
<img src="class.jpg" alt= width="266" height="266" />
road street
</div></p>  <p class="text"><div class="picture left" style="width:266px;"> 
<img src="cover.jpg" alt= width="266" height="266" />
road street
</div></p>   

   <p class="text">

  Cats is a musical composed by Andrew Lloyd Webber, based on Old Possum's Book of Practical Cats by T. S. Eliot, and produced by Cameron Mackintosh. The musical tells the story of a tribe of cats called the Jellicles and the night they make what is known as "the Jellicle choice" and decide which cat will ascend to the Heaviside Layer and come back to a new life. Cats introduced the song standard "Memory".
  Cats is a musical composed by Andrew Lloyd Webber, based on Old Possum's Book of Practical Cats by T. S. Eliot, and produced by Cameron Mackintosh. The musical tells the story of a tribe of cats called the Jellicles and the night they make what is known as "the Jellicle choice" and decide which cat will ascend to the Heaviside Layer and come back to a new life. Cats introduced the song standard "Memory".

   </p>

 </div>

<div class="redes"><div class="facb"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=575456805501583" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></div> <div class="twt-discografia"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.example.com/" data-lang="es">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div></div>

<div id="para-coments">
          <div class="fb-comments" data-href="http://www.example.com/" data-width="700" data-num-posts="36"></div>
pTRONICA
  • 59
  • 10
  • 1
    To get your `results` to fade in, you would need to apply the `.hide().fadeIn("slow")` to the div element - not the ajax call. Example: `$(div).hide().html(results).fadeIn("slow");` . If you were trying to fadeIn comments from Facebook and Twitter, you would need to stick those in a div, and then fade those in. – Dustin Cochran Aug 06 '15 at 12:27
  • Could you give me an example with my code applied? And a little doubt, why it disappears gif div if pictures have not yet been charged?It is that the gif and load is removed Cando displayed images, is a very bad effect and I think that should remain the gif until he was charged to complete the div including images, text, etc. Thank you very much for answering. – pTRONICA Aug 06 '15 at 13:46

1 Answers1

1

Try the following to show a loading image, load content via ajax, wait till all images are loaded, then remove the loading gif.

(imagesLoaded fn taken from: jQuery Ajax wait until all images are loaded)

Your Page:

<script>

// Fn to allow an event to fire after all images are loaded
$.fn.imagesLoaded = function () {

    $imgs = this.find('img[src!=""]');
    // if there's no images, just return an already resolved promise
    if (!$imgs.length) {return $.Deferred.resolve().promise();}

    // for each image, add a deferred object to the array which resolves when the image is loaded
    var dfds = [];  
    $imgs.each(function(){

        var dfd = $.Deferred();
        dfds.push(dfd);
        var img = new Image();
        img.onload = function(){dfd.resolve();}
        img.src = this.src;

    });

    // return a master promise object which will resolve when all the deferred objects have resolved
    // IE - when all the images are loaded
    return $.when.apply($,dfds);

}

var disc = function(div,of){

  $(div).html("<img id='loadingGif' src='loading.gif' id='load'>");

  var ajax = $.ajax({url : of, type : "GET", cache: false});

  ajax
    .done(function(response){
      Commons.sorDone(div, response);

      /* MOVING
      * FB.XFBML.parse(document.getElementById('redes'));
      * twttr.widgets.load();
      */
    })
    .fail(function(){
      Commons.sorFail(div); //you didn't show a fail fn - this fn call fails
    });
  }

  Commons = {
    sorDone : function (div, response) {
      $(div).append(response).imagesLoaded().then(function(){
        //now that all images have loaded, remove the loading gif
        $('#loadingGif').remove();
        //or you could fade it out
        //$('#loadingGif').fadeOut("fast", function() { $(this).remove(); });
      });
    },
  }

</script>

In your 1986.php page, you would move the Twitter and Facebook plugins.

//at the bottom of 1986.php
<script>
FB.XFBML.parse(document.getElementById('redes'));
twttr.widgets.load();
</script>
Community
  • 1
  • 1
Dustin Cochran
  • 1,165
  • 7
  • 11
  • Thank you. The burden of twitter and facebook all in the same layer, I think you misunderstood me :S Dustin, I see the gif preload disappears before you upload images of div. The div that I want to load has pictures, text, comments plugin facebook, and twitter button follow all together. I would like the preload gif take off when loaded everything, including social buttons and images, is it could? – pTRONICA Aug 06 '15 at 22:58
  • 1
    Could you provide the empty html of your page elements so I can see how you have them setup? – Dustin Cochran Aug 07 '15 at 15:01
  • I have edited the original post with all the information, thank you very much. – pTRONICA Aug 08 '15 at 17:42
  • So you are trying to click the link, display a loading image, then remove the image as the content is loaded in? What is failing? If you want the facebook and twitter comments to load in before the page is displayed. Move your Twitter and Facebook script to your 1968.php page. – Dustin Cochran Aug 10 '15 at 12:12
  • 1
    Also, you are loading your facebook with `FB.XFBML.parse(document.getElementById('redes'));` - however, I don't see any element with the `id="redes"`. I do see a class called "redes". – Dustin Cochran Aug 10 '15 at 12:13
  • You're right, it's true, but I have to go, that I mistook to get the sample code. It all goes perfect with this JavaScript code, load facebook comments and likes, the gif appears. But now the problem is that the gif disappear before images are loaded praise and facebook plugin, I would like the gif remain until everything is loaded, how could I? Thank you Dustin – pTRONICA Aug 10 '15 at 21:03
  • See this answer for an example of how to wait until all images are loaded before removing or changing page content. http://stackoverflow.com/questions/4774746/jquery-ajax-wait-until-all-images-are-loaded – Dustin Cochran Aug 11 '15 at 23:39
  • Dustin the script fails me, this puts me in the console crhome Uncaught SyntaxError: missing) after argument list I think in this line:   $ (div) .html (""); – pTRONICA Aug 12 '15 at 00:19
  • 1
    You should have been able to debug that one, lol - `$(div) .html ("");` Do you see it? I used the wrong quotes, it should be `$(div) .html ("");` I fixed it up above as well. – Dustin Cochran Aug 12 '15 at 00:21
  • It works !!! you're a great friend, very big !! But there is one problem, now comes the gif and goes right down the content charging, when charging the gif disappears and the content is put into place, forgive my ignorance but I have been looking and not know how to fix it. But it works perfect because the gif does not disappear until you have loaded all the content. – pTRONICA Aug 12 '15 at 00:49
  • If you pass me an email I spend my website address for you to see Dustin :D – pTRONICA Aug 12 '15 at 00:51
  • 1
    I'm not really a fan of passing out my e-mail on a social network. What it sounds like you need to look into at this point is CSS. It sounds like you don't like either the position of the Loading image or the position of the content that is loaded in. CSS will help you take care of positioning. – Dustin Cochran Aug 12 '15 at 12:10
  • Check out: http://www.w3schools.com/css/css_positioning.asp and http://www.w3schools.com/css/css_float.asp – Dustin Cochran Aug 12 '15 at 12:12
  • he problem is that the gif appears and below the content charging, should not be using jquery hidden content while the gif is visible? I leave here my email so you see the problem in my website: hemancheche@gmail.com – pTRONICA Aug 12 '15 at 12:57