jQuery - 加载脚本后运行代码

发布于 2024-11-28 06:11:43 字数 1290 浏览 3 评论 0原文

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

<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() 那么为什么它会这样呢?

In my header I load scripts (I keep this scripts on my server, original links are added here just for you):

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

Then on my footer I'm executing some code:

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

I want it yo display my images horizontally and put it inside jScrollPane (http://jscrollpane.kelvinluck.com/)
But it displays my images horizontally after refresh only (or even after a few page refreshes in chrome). It looks like it tries to execute my code before page content is generated (its a wordpress theme) or before scroll libraries are loaded. What is wrong with my logic here? I'm using document.ready() so why it acts this way?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

‖放下 2024-12-05 06:11:43

尝试在页面加载后调用它

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

Try calling it after the page loads

$(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()
执手闯天涯 2024-12-05 06:11:43

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

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

I am not sure if this is your issue or not, but try the $(window).load event instead of $(document).ready. $(window).load executes after all libraries, images, frames, ect have loaded instead of after your HTML code loading (as your libraries and images may still be loading).

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文