logo标签列表

jQuery文档准备就绪的bug与社交分享服务

javascriptjquerydocument-ready
9
我有一个奇怪的问题，可能与jQuery文档准备有关。以下是包含常规社交网络脚本的html和脚本块。下面的Javascript块在body div的左边缘显示dd_outer div，并且当浏览器窗口缩小时，div会淡出并且dd_footer div会淡入。两个div之间的淡入和淡出效果正常。
问题有双重：一方面，当浏览器窗口为全宽（1200px以上）时，Facebook脚本不会始终加载和显示；它有时会出现，有时不会，有时需要重新加载页面，有时则不需要。（没有涉及任何浏览器或.htaccess缓存）。只有Facebook分享无法稳定显示，其他服务都可以正常显示。
第二个问题是当浏览器窗口变窄-约650像素时，当dd_outer div未显示且dd_footer div显示时，在页面重新加载时，页脚div将不显示，直到浏览器窗口移动了一点量。然后该div将显示，包括Facebook分享。对于移动设备来说，这是一个问题，因为浏览器窗口一开始就很窄，不应该需要“推动”使dd_footer div显示。
这个问题可能是由于我从一个使用选项设置dd_outer div的位置和滚动高度的WordPress插件中改编了这个代码所致。这就是文档准备调用上面的变量的原因。
这是否与似乎是文档准备问题有关？
变量如何集成到脚本本身中？无论它们是否硬编码，都没有关系；我可以在需要时更改它们。
我会将此放入jsfiddle进行演示，但div不会随着窗口大小调整而实际浮动。
出于清晰起见，我没有包含CSS。
<div class='dd_outer'><div class='dd_inner'><div id='dd_ajax_float'>

<div class="sbutton"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class="sbutton">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="" data-count="vertical" data-via="#">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<div class="sbutton"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>

<div class="sbutton"><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></div>

</div></div></div>

在页脚中，有一个id为“dd_footer”的
，其中包含与上面相同的社交脚本，并由下面的脚本淡入淡出。
这是jQuery代码，用于将社交服务定位到左侧，并使其淡出，然后淡入 div。
<script type="text/javascript">

var dd_top = 0;
var dd_left = 0;

var dd_offset_from_content = 70; var dd_top_offset_from_content = 10;

jQuery(document).ready(function(){

    var $floating_bar = jQuery('#dd_ajax_float');

    var $dd_start = jQuery('#dd_start');
    var $dd_end = jQuery('#dd_end');
    var $dd_outer = jQuery('.dd_outer');

    // first, move the floating bar out of the content to avoid position: relative issues
    $dd_outer.appendTo('body');

    dd_top = parseInt($dd_start.offset().top) + dd_top_offset_from_content;

    if($dd_end.length){
        dd_end = parseInt($dd_end.offset().top);
    }

    dd_left = -(dd_offset_from_content + 55);

    dd_adjust_inner_width();
    dd_position_floating_bar(dd_top, dd_left);

    $floating_bar.fadeIn('slow');

    if($floating_bar.length > 0){

        var pullX = $floating_bar.css('margin-left');

        jQuery(window).scroll(function () { 

            var scroll_from_top = jQuery(window).scrollTop() + 30;
            var is_fixed = $dd_outer.css('position') == 'fixed';

            if($dd_end.length){
                var dd_ajax_float_bottom = dd_end - ($floating_bar.height() + 30);
            }

            if($floating_bar.length > 0)
            {
                if(scroll_from_top > dd_ajax_float_bottom && $dd_end.length){
                    dd_position_floating_bar(dd_ajax_float_bottom, dd_left);
                    $dd_outer.css('position', 'absolute');
                } 
                else if ( scroll_from_top > dd_top && !is_fixed )
                {
                    dd_position_floating_bar(30, dd_left);
                    $dd_outer.css('position', 'fixed');
                }
                else if ( scroll_from_top < dd_top && is_fixed )
                {
                    dd_position_floating_bar(dd_top, dd_left);
                    $dd_outer.css('position', 'absolute');
                }
            }
        });
    }   
    });

jQuery(window).resize(function() {
    dd_adjust_inner_width();
});

var dd_is_hidden = false;
var dd_resize_timer;
function dd_adjust_inner_width() {

    var $dd_inner = jQuery('.dd_inner');
    var $dd_floating_bar = jQuery('#dd_ajax_float')
    var width = parseInt(jQuery(window).width() - (jQuery('#dd_start').offset().left * 2));
    $dd_inner.width(width);
    var dd_should_be_hidden = (((jQuery(window).width() - width)/2) < -dd_left);
    var dd_is_hidden = $dd_floating_bar.is(':hidden');

    if(dd_should_be_hidden && !dd_is_hidden)
    {
        clearTimeout(dd_resize_timer);
        dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeOut(); }, -dd_left);
                        jQuery('#dd_footer').fadeIn();

    }
    else if(!dd_should_be_hidden && dd_is_hidden)
    {
        clearTimeout(dd_resize_timer);
        dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeIn(); }, -dd_left);
                        jQuery('#dd_footer').fadeOut();
    }
}

function dd_position_floating_bar(top, left, position) {
    var $floating_bar = jQuery('#dd_ajax_float');
    if(top == undefined) top = 0 + dd_top_offset_from_content;;
    if(left == undefined) left = 0;
    if(position == undefined) position = 'absolute';

    $floating_bar.css({
        position: position,
        top: top + 'px',
        left: left + 'px'
    });
}

</script>
我刚刚在Facebook脚本中遇到了类似的问题...我只是在HEAD部分使用了JavaScript集成，并向嵌入脚本添加了一个“异步”属性，然后将异步“嘿，Facebook现在也准备好了”事件发送到我的jqery事件队列中...我无法详细帮助您，因为我不完全理解您想要做什么，并且需要重新组织整个代码...所以-请私下联系我（电子邮件/ Skype）或尝试弄清楚...我使用了这些代码行：http://pastie.org/private/9m4b9eet1dzzkl6duqpkrg - TheHe
@TheHe，谢谢，让我试试这个。另外，您应该将您的评论添加为答案，以便有资格获得赏金。 - markratledge
4个回答
7

jQuery .ready() 无法等待iframe和其他外部媒体加载完毕。这些社交按钮通常通过插入一个iframe来工作。load事件可以等待iframe等元素加载完毕，因此您可以尝试使用该事件，例如：

jQuery(window).load(function () {

    /* put the code you had inside .ready() here */

});
1
问题在于你的想法：$(document).ready()会在DOM准备就绪时触发，而不是所有脚本都准备就绪时触发！
一个想法是搜索你正在使用的社交API的触发器，或者仅延迟你的计算（例如通过setTimeout）。
请记住它们是异步的，即使你在脚本标签上指定了“async”为false，你仍然不知道它们何时激活或完成。
除了Facebook，所有的社交服务都显示出来了，所以我认为这不是脚本本身的问题。 - markratledge
哦，我看到你在移动节点，也许这会破坏你的FB小部件...有时候移动节点并不适用于所有小部件。 - FibreFoX
0

我刚刚在Facebook脚本中遇到了类似的问题... 我只是使用了JavaScript中的HEAD部分集成，并向嵌入脚本添加了一个“异步”属性，然后将异步“嘿，Facebook现在也准备好了”事件发送到我的jQuery事件队列中...

我无法详细帮助您，因为我不完全理解您想要做什么，并且需要重新组织整个代码... 因此，请私下联系我（电子邮件/ Skype）或尝试弄清楚... 我使用了这些代码行：pastie.org/private/9m4b9eet1dzzkl6duqpkrg

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接