jQuery文档准备好了与社交共享服务的buggyness

Question

我有一个奇怪的问题可能与jQuery文档准备好有关.下面是一个包含常用社交网络脚本的html和脚本块.下面的Javascript块dd_outer在body div的左边缘显示div,当浏览器窗口缩小时,div淡出并且dd_footerdiv被淡入.两个div之间的淡入淡出和淡出效果正常.

问题有两个:一个问题是当浏览器窗口是全宽(1200px +)时,Facebook脚本将无法加载并始终显示; 它有时会出现,有时则不会出现,有时会在页面重新加载后出现,有时则不会出现.(不涉及浏览器或.htaccess缓存).只有Facebook的份额不能始终如一地显示; 所有其他服务显示确定.

第二个问题是,当浏览器窗口很窄时 - 650 px左右,当dd_outerdiv没有显示且dd_footerdiv为 - 页脚div将不会显示在页面重新加载,直到浏览器窗口移动最小量.然后div将显示,Facebook分享和所有.对于移动设备,这是一个问题,因为浏览器窗口将开始变窄并且不应该被"轻推"以进行dd_footerdiv显示.

这个问题可能已经发挥作用,因为我已经从WordPress插件中调整了这个代码,该插件使用选项来设置dd_outerdiv 的位置和滚动高度.这就是文档就绪调用之上的变量的原因.

这是一个似乎是文档准备问题的问题吗？

如何将变量集成到脚本本身？它们是否被硬编码并不重要; 我可以在需要时更换它们.

我会把它扔进一个jsfiddle来演示但是div不会在窗口调整大小的情况下实际浮动.

为清晰起见,我没有包含CSS.

这是html和社交脚本块:

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

在页脚中 <div id="dd_footer">that contains the same social scripts as above</div> ,并且通过以下脚本淡入淡出:

这是jQuery,它将dd_outer社交服务定位在左侧,并将其淡出并在dd_footerdiv中淡出.

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

Answer 1

jQuery .ready()不会等待iframe和其他外部媒体加载.这些社交按钮往往通过插入iframe来工作.load事件会等待iframe等,所以你可以尝试使用那个事件,即

jQuery(window).load(function () {

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

});

Answer 2

问题来自于你的想法：$(document).ready()当 DOM 准备好时触发，而不是当所有脚本准备好时触发！

一个想法是搜索您正在使用的社交 API 的触发器，或者只是延迟您的计算（例如通过setTimeout）。

请记住，它们是异步的，即使您在脚本标签上指定“异步”为 false，您仍然不知道它们何时激活或完成。