jQuery - 加载脚本后运行代码

Question

在我的标题中，我加载脚本(我将此脚本保留在我的服务器上，此处仅为您添加原始链接):

<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/mwheelIntent.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js">

然后在我的页脚上执行一些代码:

$(document).ready(function() {
            $(function(){
                $('.scroll-pane').load().jScrollPane();
            });
            numOfPics = $('#gallery-wraper img').size();
            widthOfAll = 0;
            $('#gallery-wraper img').each(function() {
                imgWidth = $(this).width() + 20;
                widthOfAll += imgWidth;
            }); // end of each
            $("#gallery-container").load().css("width",widthOfAll);

            galleryPosition = $(window).height() / 2 - 250;
            $("#gallery").css("margin-top", galleryPosition);
});// end of document.ready()

我希望它水平显示我的图像并将其放入 jScrollPane ( http://jscrollpane.kelvinluck.com/ )但它仅在刷新后水平显示我的图像(甚至在 Chrome 中刷新几个页面后)。看起来它试图在生成页面内容(它是一个 WordPress 主题)之前或在加载滚动库之前执行我的代码。我这里的逻辑有什么问题吗？我正在使用 document.ready() 那么为什么它会这样呢？

Answer 1

尝试在页面加载后调用它

$(document).ready(function() {
  $(function(){
      $('.scroll-pane').load().jScrollPane();
  });
  function updateCSS() {
    numOfPics = $('#gallery-wraper img').size();
    widthOfAll = 0;
    $('#gallery-wraper img').each(function() {
        imgWidth = $(this).width() + 20;
        widthOfAll += imgWidth;
    }); // end of each
    $("#gallery-container").load().css("width",widthOfAll);

    galleryPosition = $(window).height() / 2 - 250;
    $("#gallery").css("margin-top", galleryPosition);
  }

  setTimeout('updateCSS()',100);
});// end of document.ready()