0

我希望在其他所有内容（其他 JavaScript 函数和 CSS）运行后调用 JavaScript 函数。这个函数改变了我正在创建的幻灯片的 CSS。

我已将函数添加到我的 HTML 文件中：

function loadFullSlideShow {    
  alert('If I remove this alert this would not work');
  $('#background').width('100%');
  $('#background').height("auto");
  $('#slide_area').width('100%');
  // alert('This alert ensure application of CSS with code below');
  $('#slide_area').height("auto");
  $('img').width('98%');
  $('img').height('auto');
  $('#thumb_container').width('100%');
  $('#thumb_container').height('auto');
  $('#controls').css('top', $('img').height());
  $('#caption_credit_footer').css('top', ($('img').height() + 18));
});

我希望在所有其他脚本完成加载后调用此函数。令人惊讶的是，当我调用alert代码第一行中的 并单击OK警告框时，正在应用 CSS 中的更改。但是，当我删除警报时，不会应用更改。

我怀疑当我删除alert代码时，代码会在其他一些 JavaScript 代码之前执行。如何确保此代码在页面加载的最后运行？

我尝试过以多种方式调用此函数：

  1. $(window).bind("load", function() { loadFullSlideShow() });
  2. $(window).on("load", function() { loadFullSlideShow() });
  3. window.load(function() { loadFullSlideShow()});
  4. $(function() { loadFullSlideShow() });
  5. 我也尝试将它绑定到<script type="text/javascript" defer="defer"></script>.

编辑：我正在为 jQuery JavaScript 库使用jPlayer 插件。

4

2 回答 2

5

如果alert()修复了您的代码，那么您可能正在运行一些异步代码，并且alert()导致您的代码在异步代码完成之前不会被执行。使您的代码在异步代码完成后可靠运行的唯一方法是挂钩到异步代码的完成函数，以便您知道它何时完成（下面的选项＃6）。如果此异步代码是某个库，那么您需要查看该库的文档并找到一个回调，您可以注册以了解它何时完成。

您还没有描述您希望页面加载的其他内容，因此我们无法确切知道要推荐什么。

基本上，您必须将您的代码组织成正确的顺序，并且它会以所需的顺序被调用，因为常规的 javascript（不是安排在事件上的东西）是按照它被解析的顺序执行的。您的选择是：

  1. 修复文件中脚本的顺序，以便它们按所需顺序执行。

  2. 将它放在<body>标签的末尾，它将是最后一个运行的脚本。

  3. 使用$(document).ready(loadFullSlideShow)它，它将在 DOM 准备好后运行。如果您有其他需要运行的 .ready() 脚本，则最后注册此脚本，它将最后执行。

  4. 使用$(window).load(loadFullSlideShow)它，它将在 DOM 准备好并加载所有图像后运行。如果有多个带有 的脚本.load()，那么最后注册这个，它会被最后调用。

  5. 使用 a setTimeout(loadFullSlideShow, xx)，它将在未来一段时间内运行。这通常是一个黑客。仔细组织你的代码可以避免这样做的需要。

  6. 如果您有要等到完成后的异步脚本，那么您将不得不从异步脚本的完成函数中调用您的函数。

  7. 使用 asetInterval()并轮询您的页面，等待某些内容出现，然后再运行您的代码。这也是一个 hack，总有更好的解决方案（比如注册完成回调）

  8. 使用类或 id 并将您的样式规则指定为 CSS，以便它们始终存在，您不必使用 javascript 代码应用样式。这样你就完全不用担心时间问题了。

于 2013-04-28T09:42:38.273 回答
1

您正在将 CSS 与 Javascript 一起应用，为什么不使用 CSS？它更快，更兼容！如果它不起作用，您应该专注于修复 CSS 而不是使用 Javascript。

#background {
    width: 100%;
    height: auto;
} 
#slide_area {
    width: 100%;
    height: auto;
}
img {
    width: 98%;
    height: auto;
}

#thumb_container {
    width: 100%;
    height: auto;
}

#controls {
    /* Find a valid CSS way to position this, e.g. with margin. Depends too much on your HTML */
}

#caption_credit_footer {
   /* Find a valid CSS way to position this, e.g. with margin. Depends too much on your HTML */
}
于 2013-04-28T09:48:32.433 回答