Question

我的网页遇到了问题。我有一个启动画面，它应该在页面加载时运行，并且它可以正常运行。我还有一个加载屏幕，我想在启动画面后运行，但我无法弄清楚如何使启动画面运行，然后加载下一行代码，这将是加载屏幕的加载。如何使启动屏幕运行然后加载屏幕运行？你可以看到下面的代码。

<script type="text/javascript">
$(window).load(function() {
     $("#spinner").fadeOut( 3000 );
})
function SplashDone() { 
         document.getElementById('splash').style.display = 'none'; 
} 
function Init() { 
        document.getElementById('splash').style.display = 'block'; 
        setTimeout(function(){ SplashDone(); }, 3000); 
}  
   window.onload = Init;
</script>
<body>
<div id="spinner">
<p>Loading</p>
</div>
<div id="splash">
<p>Splash</p>
<p><a href="#" onclick="SplashDone(); return false;">Skip</a></p>
</div>

所以我基本上问的是，如何在页面加载后运行脚本，然后在该脚本运行后运行另一个脚本？

Answer 1

您可以通过showLoading功能从splashDone屏幕进行操作。这样您就可以确保在两种情况下都会出现加载屏幕：如果超时用完，用户点击Skip按钮：

window.onload = init;

function init() {
    setTimeout(splashDone, 3000);
}

function splashDone() {
    document.getElementById('splash').style.display = 'none';
    showLoading();
}

function showLoading() {
    setTimeout(loadingDone, 3000);
}

function loadingDone() {
    document.getElementById('spinner').style.display = 'none';
}

我还为这个purpuse和一些CSS添加了showLoading函数，默认情况下可以看到启动和加载，因此您不必在页面加载时首先显示它们。

演示：http://jsfiddle.net/P8evf/1/

Answer 2

假设#splash引用了你的启动画面而#spinner引用了你的加载屏幕，以下内容将在页面加载后隐藏你的启动画面3，然后在3秒内淡出加载器。

$(document).ready(function() {
 setTimeout(function(){
  $("#splash").css('display','none');
  $("#spinner").fadeOut( 3000 );
 }, 3000); 

});

更新：dfsq的FIDDLE

的JQ版本

旁注：我不知道你为什么要混合使用JS和JQuery，恕我直言，如果你使用其中任何一个并增加可读性，它会更有意义。

Answer 3

setTimeout(function(){ SplashDOne(); }, 3000);

应该是SplashDone吗？

我不太确定你想要做什么但是......

Answer 4

将您的脚本放在单独的.js文件中，然后在完成工作后调用它来执行

$.getScript('url to js file');

Javascript / Jquery - 在其他脚本运行后运行脚本

4 个答案:

演示：http://jsfiddle.net/P8evf/1/