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

Question

在其他所有内容之后加载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));
});

Run Code Online (Sandbox Code Playgroud)

我希望在所有其他脚本完成加载后调用此函数.令人惊讶的是,当我调用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>.

编辑:我正在使用jQuery JavaScript库的jPlayer插件.

Answer 1

jfr*_*d00 5

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

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

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

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

归档时间：	12 年，6 月前
查看次数：	2528 次
最近记录：	12 年，6 月前