CODEWITHSUNDEEP
javascriptjquerywordpress
Jordan
Jordan

Reputation: 237

Is it possible to delay window.load?

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)

<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?

Upvotes: 2

Views: 7406

Answers (3)

user145400
user145400

Reputation: 1074

The window load event executes when the complete page is fully loaded, including all frames, objects and images. So what is the source of the 2500ms exactly? If it is your other scripts doing stuff with the content then all you have to do is call your 2 lines of code above from inside your other scripts, after they are done running.

See here for more info http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16821

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

Upvotes: 1

Manjar
Manjar

Reputation: 3268

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

Upvotes: 0

Related Questions