在完成所有其他操作之后加载JavaScript函数

我希望在其他一切（其他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));
});

我希望在所有其他脚本完成加载后调用此函数。令人惊讶的是，当我调用代码第一行中的

警报

并单击警报框上的

OK

时，CSS中的更改正在应用。但是，当我删除警报时，这些更改不会被应用

我怀疑当我删除

警报时

代码会在其他一些JavaScript代码之前执行。如何确保此代码在页面加载的最后运行

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

$（window.bind（“load”，function（）{loadFullSlideShow（）}）

$（窗口）.on（“加载”，函数（）{loadFullSlideShow（）}）

window.load（函数（）{loadFullSlideShow（）}）

$（函数（）{loadFullSlideShow（）}）

我还尝试在

中绑定此文件

编辑：我正在使用jQuery JavaScript库。

如果

alert（）

修复了您的代码，那么您可能有一些异步代码正在运行，

alert（）

会导致您的代码在异步代码完成之前无法执行。在异步代码完成后，使代码可靠运行的唯一方法是挂接异步代码的完成函数，以便知道何时完成（下面的选项#6）。如果这个异步代码是某个库，那么您需要在该库的文档中查找并找到一个回调函数，您可以注册该回调函数以知道何时完成

您还没有描述页面中还有哪些内容是您希望在加载之后加载的，因此我们不可能确切知道要推荐什么

基本上，您必须将代码组织到正确的序列中，并且当按照解析顺序执行常规javascript（而不是在事件上调度的内容）时，它将以所需的序列被调用。你的选择是：

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

将它放在

标记的末尾，它将是最后一个运行的脚本

使用

$（document）.ready（loadFullSlideShow）

，它将在DOM就绪后运行。如果有其他.ready（）脚本需要运行此脚本，请最后注册此脚本，它将最后执行

使用

$（window）.load（loadFullSlideShow）

，它将在DOM就绪且所有图像都已加载后运行。如果有多个脚本使用

.load（）

，那么最后注册这一个脚本，它将被最后调用

使用

setTimeout（loadFullSlideShow，xx）

它将在将来某个时间运行。这通常是一种黑客行为。仔细组织代码可以避免这样做

如果有异步脚本要等到它们完成后再执行，则必须从异步脚本的completion函数调用函数

使用

setInterval（）

并在运行代码之前轮询页面，等待某些内容出现。这也是一种黑客行为，总有更好的解决方案（比如注册完成回调）

使用类或ID并将样式规则指定为CSS，以便它们始终存在，而不必使用javascript代码应用样式。那你就不用担心时间了

如果

alert（）

修复了您的代码，那么您可能有一些异步代码正在运行，

alert（）

会导致您的代码在异步代码完成之前不会执行。在异步代码完成后，使代码可靠运行的唯一方法是挂接异步代码的完成函数，以便知道何时完成（下面的选项#6）。如果这个异步代码是某个库，那么您需要在该库的文档中查找并找到一个回调函数，您可以注册该回调函数以知道何时完成

您还没有描述页面中还有哪些内容是您希望在加载之后加载的，因此我们不可能确切知道要推荐什么

基本上，您必须将代码组织到正确的序列中，并且当按照解析顺序执行常规javascript（而不是在事件上调度的内容）时，它将以所需的序列被调用。你的选择是：

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

将它放在

标记的末尾，它将是最后一个运行的脚本

使用

$（document）.ready（loadFullSlideShow）

，它将在DOM就绪后运行。如果有其他.ready（）脚本需要运行此脚本，请最后注册此脚本，它将最后执行

使用

$（window）.load（loadFullSlideShow）

，它将在DOM就绪且所有图像都已加载后运行。如果有多个脚本使用

.load（）

，那么最后注册这一个脚本，它将被最后调用

使用

setTimeout（loadFullSlideShow，xx）

它将在将来某个时间运行。这通常是一种黑客行为。仔细组织代码可以避免这样做

如果有异步脚本要等到它们完成后再执行，则必须从异步脚本的completion函数调用函数

使用

setInterval（）

并在运行代码之前轮询页面，等待某些内容出现。这也是一个黑客，总是有更好的

#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 */
}