Задержка сценариев jQuery - PullRequest
Новая
       8

Задержка сценариев jQuery

0 голосов
/ 12 марта 2012

Я использую jScrollPane для простого сайта, потому что я решил использовать центрированный фиксированный div с высотой 600 пикселей.Все работает нормально, за исключением того, что когда я добавил комментарий на Facebook, прокручиваемое погружение не ждет загрузки блока комментариев на Facebook, поэтому поле комментария не отображается!

Я вызываю функцию для скрипта прокрутки внутри HEAD tag: 

        <script type="text/javascript" id="sourcecode">
        $(function()
        {
            $('.scroll-pane').jScrollPane();
        });
       </script>

А вот сценарий комментария facebook, который вставляется сразу после BODY tag: 

        <div id="fb-root"></div>
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

А вот CSS, который определяет стильдля моего прокручиваемого DIV: 

.scroll-pane
{
    width: 100%;
    height: 600px; 
    overflow: auto; 
}

Как я уже сказал, прокручиваемый div работает нормально, но я думаю, что мне нужно как-то заставить его ждать, пока загрузится это поле для комментариев на Facebook.Любое предложение оценивается!

ОБНОВЛЕНИЕ

Я обнаружил, что прокручиваемый div может проверять динамический контент: динамический контент , но у меня нетИдея, где поместить следующий код в мой HTML-файл: 

$(function()
{
    var settings = {
        showArrows: true
    };
    var pane = $('.scroll-pane')
    pane.jScrollPane(settings);
    var api = pane.data('jsp');
    var i = 1;
)};

Ответы [ 2 ]

2 голосов
/ 12 марта 2012

Я бы поместил все, что вы делаете в jquery / javascript, внутри .ready () 

$(document).ready(function() {
  // Handler for .ready() called.
});

Это обеспечит загрузку всей страницы, пока не будет запущен jquery.

Это немного более подробно, используя ваш идентификатор Div. 

$(document).ready(function() 
 $("#fb-root").function({
    'onSuccess': function() {

      // Perform all of these now that fbook box is loaded
    }
  )};
)};
2 голосов
/ 12 марта 2012

Ожидание готовности окна комментария fb не так просто, но вы можете: а) подождать фиксированное время и затем инициализировать jScrollPane, надеясь, что поле fb будет готово к этому времени (например, 1 или 2 секунды). 

<script type="text/javascript" id="sourcecode">
$(function() {                        // <-- Wait for the DOM to be ready
    setTimeout(function() {
        // Now initialize the pane as before:
        $('.scroll-pane').jScrollPane();
    }, 1000);                         // <-- Waiting an additional 1000ms
});
</script>

или б) если вы хотите получить пример с динамическим контентом (по той ссылке, которую вы указали), вы просто реинициализируете jScrollPane каждые 100 мс или как угодно: 

<script type="text/javascript" id="sourcecode">
$(function() {
    // As you already did, initialize the scrollpane first:
    var pane = $('.scroll-pane');
    pane.jScrollPane();

    // Store an access handler (api) in a variable
    var api = pane.data('jsp');

    // Set timer to reinitialize the pane every 250ms
    setInterval(api.reinitialise, 250);
});
</script>
...