在社交按钮完全加载之前，不要显示它们(通过jquery加载) [英] Do not show social buttons (loaded via jquery) till they all are completely loaded

问题描述

在我的wordpress网站中，我使用的是聚集在栏中的社交按钮.

In my wordpress site, I am using social buttons gathered in a bar.

通过jquery-ajax更新内容时，这些按钮会动态更新.

These buttons are dynamically updated when the content is updated via jquery-ajax.

function update_social(str)
{
            $(".dd_outer").fadeOut("slow");     
            UpdateLikeButton(str);
        UpdateTweetButton(str);
        UpdatePlus1Button(str);

            $(".dd_outer").fadeIn('slow')

}

，其中str参数是帖子的ID. dd_outer是浮动条的包装div.当我调用负责通过AJAX动态加载帖子内容的函数时，我正在调用update_social.

where the str parameter is the ID of the post. and dd_outer is the wrapper div of the floating bar. I am calling update_social when I call the function responsible of dynamically loading post contents via AJAX.

所有内容都像一个咒语，但是问题在于，有时在社交按钮完全加载之前，该栏会逐渐消失.如何在所有按钮都被加载之前不显示总条形图?

Everything works like a charm, but the problem is that, sometimes the bar fades in before the social buttons are completely loaded. How can I make the total bar do not appear till all buttons are loaded?

我认为FadeIn和FadeOut就足够了.感谢您的帮助.

I thought FadeIn and FadeOut are enough. Appreciated is your help.

function UpdateLikeButton(str)
        {
            var elem = $(document.createElement("fb:like"));
            elem.attr("href", "http://www.bag.com/Arabic/Arra2issia/"+str+"/");
            elem.attr("send", "false");
            elem.attr("layout", "box_count");
            elem.attr("show_faces", "false");
            $("#zzzz").empty().append(elem);
            FB.XFBML.parse($("#zzzz").get(0));
        }           

function UpdateTweetButton(str)
        {


            var elem3 = $(document.createElement("a"));
            elem3.attr("class", "twitter-share-button");
            elem3.attr("href","http://twitter.com/share");
            elem3.attr("data-url","http://www.bagh.com/"+str+"/");
            elem3.attr("data-counturl","http://www.bagh.com/"+str+"/");
            elem3.attr("data-count", "vertical");
            elem3.attr("data-via", "#");
            elem3.attr("data-text",str);
            elem3.attr("data-lang","en");
            $("#tweet").empty().append(elem3);

            $.getScript("http://platform.twitter.com/widgets.js",function(){
            twttr.widgets.load();


            });
        }   


 function UpdatePlus1Button(str)
        {
            var elem4 = $(document.createElement("g:plusone"));

            elem4.attr("href","http://www.bagh.com/"+str+"/");
            elem4.attr("size", "tall");

            $("#plus1").empty().append(elem4);

            $.getScript("https://apis.google.com/js/plusone.js");
        }   

原始按钮:

 <div id="zzzz" ><fb:like href="<?php the_permalink();?>" send="false" show_faces="false" layout="box_count"></fb:like></div>


<div id="plus1"><g:plusone size='tall' href='<?php the_permalink();?>'></g:plusone></div>

<div id="tweet"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink();?>" data-counturl="<?php the_permalink();?>" data-count="vertical" data-via="#" data-text="<?php the_ID();?>" data-lang="en"></a></div>

推荐答案

在functions中添加return就像这样:

function UpdateTweetButton(str)
        {
            var elem3 = $(document.createElement("a"));
            elem3.attr("class", "twitter-share-button");
            elem3.attr("href","http://twitter.com/share");
            elem3.attr("data-url","http://website/"+str+"/");
            elem3.attr("data-counturl","http://website/"+str+"/");
            elem3.attr("data-count", "vertical");
            elem3.attr("data-via", "#");
            elem3.attr("data-text",str);
            elem3.attr("data-lang","en");
            $("#tweet").empty().append(elem3);

     return $.getScript("http://platform.twitter.com/widgets.js",function(){
            twttr.widgets.load();
            });
        }   


 function UpdatePlus1Button(str)
        {
            var elem4 = $(document.createElement("g:plusone"));
            elem4.attr("href","http://website/"+str+"/");
            elem4.attr("size", "tall");
            $("#plus1").empty().append(elem4);
     return $.getScript("https://apis.google.com/js/plusone.js");
        }

像这样称呼他们:

function update_social(str)
{
          $(".dd_outer").fadeOut("slow");     
            UpdateLikeButton(str);
          $.when(UpdateTweetButton(str), UpdatePlus1Button(str)).done(function(){
             $(".dd_outer").fadeIn('slow');
          });
}

这篇关于在社交按钮完全加载之前，不要显示它们(通过jquery加载)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！