使用 jquery 预加载 gif 评论加载内容 div 并关注 facebook twitter

Question

我正在使用 jquery 将内容加载到 div 中，内容使用预加载 gif 加载，但在您加载将加载内容的社交按钮 facebook 评论和图像之前，它会消失，我希望在加载所有内容之前保留图像 gif。我留下我的代码：

<!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>

您要加载的内容示例，都或多或少有一些差异，但都包括评论 facebook、图像和文本。

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>

Answer 1

尝试以下显示加载图像，通过 ajax 加载内容，等待所有图像加载完毕，然后删除加载 gif。

(imagesLoaded fn 取自：jQuery Ajax wait until all images are loaded)

您的主页：

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

在您的 1986.php 页面中，您将移动 Twitter 和 Facebook 插件。

//at the bottom of 1986.php
<script>
FB.XFBML.parse(document.getElementById('redes'));
twttr.widgets.load();
</script>

使用 jquery 预加载 gif 评论加载内容 div 并关注 facebook twitter

Load content div with jquery preload gif comments and follow facebook twitter

jquery

parsing

twitter

fade