Question

我希望在其他所有内容（其他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代码之前执行。如何确保此代码在页面加载的最后运行？

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

$(window).bind("load", function() { loadFullSlideShow() });
$(window).on("load", function() { loadFullSlideShow() });
window.load(function() { loadFullSlideShow()});
$(function() { loadFullSlideShow() });
我也尝试在<script type="text/javascript" defer="defer"></script>中绑定它。

修改：我正在使用jPlayer Plugin用于jQuery JavaScript库。

Answer 1

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

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

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

修复脚本在文件中的顺序，以便按所需顺序执行。
将它放在<body>标记的末尾，它将是最后一个要运行的脚本。
使用$(document).ready(loadFullSlideShow)，它将在DOM准备好后运行。如果你有其他的.ready（）脚本需要在之后运行，那么最后注册这个脚本并最后执行它。
使用$(window).load(loadFullSlideShow)，它将在DOM准备好并且所有图像都已加载后运行。如果有多个脚本.load()，那么最后注册一个，最后会调用它。
使用setTimeout(loadFullSlideShow, xx)，它将来会运行一段时间。这通常是一个黑客攻击。仔细组织代码可以避免这样做。
如果你有异步脚本要等到它们完成之后，那么你必须从异步脚本的完成功能中调用你的函数。
使用setInterval()并在运行代码之前轮询您的页面，等待某些内容出现。这也是一个黑客，总有更好的解决方案（如注册完成回调）
使用类或ID并将样式规则指定为CSS，因此它们始终存在，您不必使用javascript代码应用样式。那么你根本不用担心计时。

Answer 2

您正在使用Javascript应用CSS，为什么不使用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 */
}

在其他所有内容之后加载JavaScript函数

2 个答案: