我有一个奇怪的问题，可能与 jQuery 文档准备就绪有关。 下面是一个包含常用社交网络脚本的 html 和脚本 block 。下面的 Javascript block 显示 dd_outer div 在 body div 的左边缘，当浏览器窗口缩小时，div 淡出并且 dd_footer div 淡入。两个 div 之间的淡入和淡出工作正常。

问题有两个:一个问题是当浏览器窗口全宽(1200px+)时，Facebook 脚本将无法加载和显示一致；它有时出现有时不出现，有时在页面重新加载后有时不出现。 (不涉及浏览器或 .htaccess 缓存)。只有 Facebook 分享未能始终如一地显示；所有其他服务都显示正常。

第二个问题，当浏览器窗口很窄时 - 650 px 左右，当 dd_outer div 未显示，dd_footer div 是 - 在浏览器窗口移动最小量之前，页脚 div 不会显示在页面重新加载上。然后 div 将显示，Facebook 共享和所有。对于移动设备，这是一个问题，因为浏览器窗口一开始会很窄，不需要“微调”来制作 dd_footer。 div显示。

这个问题可能已经出现了，因为我从一个使用选项设置 dd_outer 位置的 WordPress 插件中改编了这段代码。 div 和滚动高度。这就是文档就绪调用上方的变量的原因。

这似乎是文档就绪问题的问题吗？

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

我会把它放在 jsfiddle 中进行演示，但 div 不会随着窗口大小的调整而实际 float 。

为了清楚起见，我没有包含 CSS。

这是 html 和社交脚本 block :

<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> 并通过以下脚本淡入和淡出:

这是定位 dd_outer 的 jQuery社会服务向左淡出并淡入 dd_footer分区

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

最佳答案

jQuery .ready() 不等待 iframe 和其他外部媒体加载。这些社交按钮往往通过插入 iframe 来工作。加载事件会等待 iframe 等，因此您可以尝试使用该事件，即

jQuery(window).load(function () {

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

});

关于javascript - jQuery 文档准备好社交共享服务的 buggyness，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15215101/