jQuery dokument gotowy buggyness z usługami udostępniania społecznościowego

Question

Mam dziwny problem, który może mieć związek z dokumentem jQuery. Poniżej znajduje się blok HTML i skryptu zawierający zwykłe skrypty sieci społecznościowej. Poniższy blok Javascript wyświetla podziałkę dd_outer div na lewej krawędzi elementu div ciała, a gdy okno przeglądarki jest zmniejszane, element div jest wygaszany, a element div dd_footer jest wyblakły. Efekt zanikania i zanikania między dwoma elementami div działa poprawnie.

Problem jest dwojaki: jednym z problemów jest, gdy okno przeglądarki ma pełną szerokość (1200 pikseli +), skrypt Facebooka nie ładuje się i wyświetla się konsekwentnie; czasami pojawia się, a czasami nie, czasami po przeładowaniu strony, a czasami nie. (Nie ma potrzeby buforowania przeglądarki ani .htaccess). Tylko udział na Facebooku nie wyświetla się konsekwentnie; wszystkie inne usługi pokazują OK.

Drugim problemem że gdy okno przeglądarki jest wąski - 650 px lub tak, gdy dd_outer div nie jest wyświetlany i dd_footer div jest - div stopki nie będzie wyświetlana na przeładowania strony, dopóki okno przeglądarki jest przesunął najmniejszą kwotę. Następnie wyświetli się div, udział Facebook i wszystkie. W przypadku urządzenia mobilnego jest to problem, ponieważ okno przeglądarki będzie wąskie na początku i nie powinno być "popychane", aby utworzyć wyświetlacz div div.

Ten problem może nie wchodzić w grę bo przystosowany ten kod z WordPress wtyczki, które używane opcje, aby ustawić pozycję dd_outer div i przewijania wysokości. Z tego powodu zmienne powyżej wywołania gotowości dokumentu.

Czy to jest problem z czymś, co wydaje się być dokumentem gotowym do wydania?

W jaki sposób można zintegrować zmienne ze skryptem? Nie ma znaczenia, czy są one na stałe; Mogę je zmienić w razie potrzeby.

Wrzuciłbym to do jsfiddle na demo, ale divy nie będą realistycznie unosić się przy zmianie rozmiaru okna.

Nie dodałem do CSS klarowności.

To html i skrypt społeczne blok:

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

W stopce jest<div id="dd_footer">that contains the same social scripts as above</div>i są wyblakłe i obecnie przez poniższy skrypt:

To jest jQuery, który ustawia usługi społeczne po lewej stronie i zanika i zanika w numerze dd_footer 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> 

Answer 1

Problem pochodzi ze swojego pomysłu: $(document).ready() pożarów gdy DOM jest gotowy, gdy nie wszystkie skrypty są gotowe!

Pomysł polega na wyszukaniu wyzwalacza używanych interfejsów społecznościowych lub opóźnieniu obliczeń (np. Za pośrednictwem setTimeout).

Należy pamiętać, że są to asynchrony, nawet jeśli w skrypcie znacznik zostanie określony jako "asynchroniczny" jako fałsz, nadal nie wiadomo, kiedy zostaną aktywowane lub zakończone.

Answer 2

jQuery .ready() nie czeka na przesłanie elementów iframe i innych nośników zewnętrznych. Te przyciski społecznościowe zwykle działają, wstawiając element iframe. Impreza obciążenie nie czekać na iframe etc, więc można spróbować użyć tego zdarzenia zamiast tj

jQuery(window).load(function() { 

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

}); 

Answer 3

Proponuję użyć standardowego zdarzenia DOM window.onload jeśli chcesz się upewnić, że wszystkie aktywa zewnętrzne, skrypty, zdjęcia itp są ładowane najpierw, zanim zrobisz coś:

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

referencyjny: https://developer.mozilla.org/en-US/docs/DOM/window.onload

Answer 4

właśnie wpadł podobnych problemów ze skryptem facebook ... po prostu stosować integrację w głowie poprzecznym z javascript za nd dodał "asynchroniczny" - atrybut do skryptu osadzającego javascript, który następnie uruchamia asynchroniczny "heeey, facebook jest już gotowy" - dopisz do mojego zdarzenia jQuery ...

Nie mogę ci pomóc szczegóły, ponieważ nie rozumiem całkowicie, co CHCESZ zrobić i zreorganizowałbyś cały kod DUŻO ... więc - skontaktuj się ze mną prywatnie (email/skype) lub spróbuj wymyślić ... Użyłem tego wiersza kodu: pastie .org/private/9m4b9eet1dzzkl6duqpkrg