Question

我正在使用jScrollPane作为一个简单的网站，因为我决定选择一个高度为600px的居中固定div。一切正常，除非我添加了facebook评论，可滚动潜水不等待Facebook评论栏加载，所以评论框不可见！

我正在调用HEAD标记内的滚动脚本的函数：

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

这是在BODY标签之后插入的facebook评论框的脚本：

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

以下是为我的可滚动DIV定义样式的CSS：

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

正如我所说，滚动的div工作正常，但我认为我应该以某种方式让它等待Facebook评论框加载。任何建议都是适当的！

更新

我在这里发现滚动的div可以检查动态内容：dynamic content，但我不知道将下面的代码放在我的html文件中的哪个位置：

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

Answer 1

等待fb评论框准备就绪并不容易，但你可以a）等待一段固定的时间然后初始化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>

或b）如果您想获得动态内容的示例（来自您提供的链接），您只需每100毫秒重新初始化jScrollPane：

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

Answer 2

我会在.ready()

中放置你所做的一切jquery / javascript智慧

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

这将确保加载整个页面，直到运行任何jquery。

使用你的div id稍微深入一点。

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

      // Perform all of these now that fbook box is loaded
    }
  )};
)};

延迟jQuery脚本

2 个答案: