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

【问题标题】：Load content div with jquery preload gif comments and follow facebook twitter使用 jquery 预加载 gif 评论加载内容 div 并关注 facebook twitter
【发布时间】：2015-08-05 15:22:24
【问题描述】：

我正在使用 jquery 将内容加载到 div 中，内容是使用预加载 gif 加载的，但是在您加载社交按钮 facebook cmets 和将加载内容的图像之前这会消失，我希望图像 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>

您要加载的内容示例，都或多或少相同，有一些差异，但都包括 cmets 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>

【问题讨论】：

要让您的results 淡入，您需要将.hide().fadeIn("slow") 应用于 div 元素 - 而不是 ajax 调用。示例：$(div).hide().html(results).fadeIn("slow");。如果您尝试从 Facebook 和 Twitter 淡入 cmets，则需要将它们粘贴在 div 中，然后将它们淡入。
你能给我一个应用我的代码的例子吗？还有一点疑问，如果图片还没有收费，为什么它会消失 gif div？这是删除了 gif 和加载 Cando 显示的图像，是一个非常糟糕的效果，我认为应该保持 gif 直到他被收费完成div包括图片、文字等。非常感谢您的回答。

标签： jquery parsing twitter fade

【解决方案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>

【讨论】：

谢谢。 twitter 和 facebook 的负担都在同一层，我想你误解了我：S Dustin，我看到 gif 预加载在你上传 div 图像之前消失了。我要加载的 div 有图片、文本、cmets 插件 facebook 和 twitter 按钮一起跟随。我希望在加载所有内容（包括社交按钮和图像）时，预加载 gif 会起飞，可以吗？
您能否提供页面元素的空 html，以便我查看您是如何设置它们的？
另外，您正在使用FB.XFBML.parse(document.getElementById('redes')); 加载您的Facebook - 但是，我没有看到任何带有id="redes" 的元素。我确实看到了一个名为“redes”的类。
你应该能够调试那个，哈哈 - $(div) .html ("<img id =" loadingGif "src = 'loading.gif' id = 'load'>"); 你看到了吗？我使用了错误的引号，应该是$(div) .html ("<img id =' loadingGif ' src = 'loading.gif' id = 'load'>"); 我在上面也修复了它。
我不太喜欢在社交网络上传递我的电子邮件。听起来你现在需要研究的是 CSS。听起来您既不喜欢正在加载的图像的位置，也不喜欢加载的内容的位置。CSS 将帮助您处理定位。