9

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

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

第二个问题是当浏览器窗口很窄时 - 650 px 左右，当dd_outerdiv 不显示而dd_footerdiv 是时 - 页脚 div 不会在页面重新加载时显示，直到浏览器窗口移动最小量。然后 div 将显示，Facebook 分享和所有。对于移动设备，这是一个问题，因为浏览器窗口一开始会很窄，不需要“轻推”来dd_footer显示 div。

这个问题可能已经出现，因为我已经从一个 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> ，下面的脚本淡入淡出：

这是将社交服务定位dd_outer到左侧并使其淡出并淡入dd_footerdiv 的 jQuery。

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

4 回答 4

7

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

jQuery(window).load(function () {

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

});
于 2013-03-11T14:48:22.363 回答
1

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

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

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

于 2013-03-11T13:50:57.893 回答
0

window.onload如果您想确保在执行某些操作之前首先加载所有外部资产、脚本、图像等，我建议使用标准 DOM 事件：

window.onload = function () {
   // your script that needs to run after all the external assets are loaded
}

参考：https ://developer.mozilla.org/en-US/docs/DOM/window.onload

于 2013-03-13T09:35:11.660 回答
0

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

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

于 2013-03-14T15:23:30.503 回答