Question

我已经有了这个脚本，当用户第一次访问网站时显示一条消息，然后淡出，然后在短暂的延迟后淡出另一部分。

$(window).load(function() {
    $(".greeting").delay(1500).fadeOut("500");
    $('.content').delay(2500).animate({opacity: '1'}, 500);
});

HTML / PHP（WordPress）

<div class="greeting">
  <div class="greeting-inner">
  <img id="greeting-img" src="">
  </div>
</div>
<div class="wrap">
  <header class="header">
    <div class="logo">
    <h1><a href="<?php echo home_url(); ?>/"><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.svg" onerror="this.src=<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png;this.onerror=null;" alt="<?php bloginfo('name'); ?>"></a></h1>
    </div>
  </header>
  <nav class="nav">
  <?php wp_nav_menu( array( 
  'theme_location' => 'main-nav',
  'container' => false,
  'items_wrap' => '<ul>%3$s</li>', ) );?>
  </nav>
<section class="content" role="main">
// Website content

基本上我有其他脚本在页面加载时触发，但内容实际上没有显示2500ms所以一切都迟到了2500ms。有没有办法延迟窗口负载，所以这不会发生？

Answer 1

如果您完全确定时间，则可以使用setTimeout：

setTimeout(function() {
   ... 
},"2500");

但是等待脚本加载可能会更好，所以添加一个：

$(function(){
 //do stuff
});

脚本

Answer 2

没有。您无法延迟窗口load()，因为它是由浏览器触发的。您必须在animate()完成后设置要执行的“其他脚本”。

function MyFunction() { //Just an example, of course
    //other scripts
}

$(window).load(function() {
    $(".greeting").delay(1500).fadeOut("500");

    //The last parameter is the callback that is fired after the animation
    $('.content').delay(2500).animate({opacity: '1'}, 500, MyFunction);
});

Answer 3

窗口加载事件在完整加载完整页面时执行，包括所有框架，对象和图像。那么2500ms的来源究竟是什么？如果您的其他脚本正在处理内容，那么您只需在完成运行后从其他脚本中调用上面的两行代码。

有关详细信息，请参阅此处http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

是否可以延迟window.load？

3 个答案: