Is it possible to delay window.load?

3 Views

I’ve got this script which shows a message when the user first goes to the website, then it fades out, then another section fades in after a short delay. 

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

HTML/PHP (WordPress)

Read More
<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

Basically I have other scripts which fire when the page has loaded, but the content actually doesn’t get shown for 2500ms so everything is 2500ms late. Is there a way to delay the window load so this won’t happen?

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. No. You cannot delay the window load(), for it is fired by the browser. You would have to set your “other scripts” to be executed after your animate() finishes.

    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);
});

  2. You can use setTimeout if you are completly sure of the timing:

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

    But It could be better to wait for the script to load, so add a:

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

    on the scripts