加载JavaScript函数后

我想要一个JavaScript函数被调用一切（其他JavaScript函数和CSS）后运行。这个函数改变了我创建的幻灯片的CSS。加载JavaScript函数后

我已经添加了功能到我的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库。

来源

2013-04-28 Ajit S

尝试将您的脚本放在您的html代码的最后。 – Mysteryos 2013-04-28 09:28:02

听起来像一些其他脚本动态加载内容。 – JJJ 2013-04-28 09:28:19

@Mysteryos我也试过。 – 2013-04-28 09:29:36

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

您还没有描述您的网页中还有哪些内容需要加载，因此我们无法确切知道推荐内容。

基本上，你必须将代码组织到正确的顺序，它会在需要的顺序为常规的JavaScript（没有的东西定于事件）在它被解析的顺序进行调用。您的选择是：

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

来源

2013-04-28 09:42:38 jfriend00

为什么downvote。我已经制定了OP的选项。 OP没有提供足够的信息，说明他们希望脚本执行后的内容比这更具体。 – jfriend00 2013-04-28 09:46:21

在downvote的时候，你所展示的选项与OP说他已经尝试过的完全一样，并且在评论中确定内容正在被动态加载。 – JJJ 2013-04-28 09:50:22

@Juhana--你还认为答案值得赞赏吗？现在解决方案不在这里了吗？ – jfriend00 2013-04-28 09:52:33

您正在将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-28 09:48:32 dtech

我无法做到这一点，因为这会改变页面加载，我正在使用的jQuery插件动态加载CSS图像。应该在问题中明确这一点。无论如何，感谢您的建议:) – 2013-04-28 10:57:52

然后使用'！important'指令：http://www.electrictoolbox.com/using-important-css/。或者更好：改变插件加载的CSS！这仍然是一个CSS问题，而不是JavaScript问题。 – dtech 2013-04-28 14:34:06

加载JavaScript函数后

回答

相关问题