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

Answer 2

我不确定这是否是您的问题，但请尝试$（window）.load事件而不是$（document）.ready。 $（window）.load在所有库，图像，框架等加载后执行，而不是在加载HTML代码之后执行（因为您的库和图像可能仍在加载）。

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

jQuery - 加载脚本后运行代码

2 个答案: