jQuery - 在脚本加载完成后运行代码

4

在我的标题中,我加载脚本(我将这些脚本保存在我的服务器上,原始链接只是为了您的参考):

<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(),为什么会出现这种情况?
2个回答

3

尝试在页面加载后调用它

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

嗯...但是如果有人的连接非常慢怎么办呢?比如他从没有Wi-Fi的手机访问我的页面。那么计时器可能会太慢,他将看不到应该看到的内容... - smogg
如果连接速度较慢,它仍会等待页面完全加载完成后再启动100毫秒的计时器。 - ace
顺便问一下,Kyle的答案中,$(window).load对你的网站不起作用吗?这是一个很好的链接,说明何时使用loadready。http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/ - ace
Kyle的答案似乎是我最好的解决方案,但当我使用它时,它只是出现了相同的错误 - 图像垂直显示,就像我的代码没有加载一样...我不明白为什么,因为我所做的一切都是将document.ready()更改为window.load(),而我的代码保持不变。 - smogg
你把它改成了500,是吗?但是它仍然会稍晚一些触发timeout,所以如果我有更多的图像,它将再次崩溃。例如查看这个jsFiddle,其中包含大量图像并将timeout设置为500:http://jsfiddle.net/smogg/BC8TS/embedded/result/ - smogg
显示剩余6条评论

2
我不确定这是否与你的问题有关,但请尝试使用$(window).load事件而不是$(document).ready。$(window).load事件在所有库、图像、帧等加载完毕后执行,而不是在HTML代码加载后执行(因为你的库和图像可能仍在加载中)。
参考链接:http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

好的,我已经阅读了您给我的文章,但是当我尝试使用window.load()而不是jQuery时,jQuery根本不会加载,并且我的浏览器会冻结半秒钟... - smogg

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接