Jump to content
Mad_Griffith

Preloader in jQuery doesn't work

Recommended Posts

Hi, I am trying to come up with a preloader. The problem is none of the animations start. What I am trying to achieve is the following sequence: preloader_wrapper fade in, then fade out as soon as the document is loaded.

 

JS:

jQuery(document).ready(function($) {/* * Preloader */$('#preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('#preloader_wrapper').addClass('preloader_fadeout');$('header *').css({  -webkit-animation-play-state: 'running';  -moz-animation-play-state: 'running';  -o-animation-play-state: 'running';  animation-play-state: 'running';});});});

 

CSS:

.preloader_wrapper {  position: absolute;  top: 50%;}.preloader_fadein {  -webkit-animation: preloader_fadein 2s ease;  -moz-animation: preloader_fadein 2s ease;  animation: preloader_fadein 2s ease;}@keyframes preloader_fadein {  from { opacity: 0; left: 45%; }  to { opacity: 1; left: 50%; }}.preloader_fadeout {  -webkit-animation: preloader_fadeout 2s ease;  -moz-animation: preloader_fadeout 2s ease;  animation: preloader_fadeout 2s ease;}@keyframes preloader_fadeout {  from { opacity: 1; left: 50%; }  to { opacity: 0; left: 55%; }}.header * {  -webkit-animation-play-state: paused;  -moz-animation-play-state: paused;  -o-animation-play-state: paused;  animation-play-state: paused;}
Edited by Mad_Griffith

Share this post


Link to post
Share on other sites

You're trying to define an event handler for a window load event inside the event handler for the document ready event. Won't the window have already loaded by the time the document is ready?

Share this post


Link to post
Share on other sites

Isn't the window load more comprehensive than document ready? It waits until images are loaded as well...

 

Anyways, even without the document ready, the first line of code (adding the class 'preloader_fadein') is skipped:

$('.preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('.preloader_wrapper').removeClass('preloader_fadein');$('.preloader_wrapper').addClass('preloader_fadeout');$('.header *').css({  '-webkit-animation-play-state': 'running',  '-moz-animation-play-state': 'running',  '-o-animation-play-state': 'running',  'animation-play-state': 'running'});});
Edited by Mad_Griffith

Share this post


Link to post
Share on other sites

jQuery(document).ready(function($) and $(window).load(function() are basically doing the same thing once the first one is triggered, the second won't be triggered because that time has passed and jquery code has already been carried out, remove $(window).load(function().You need a way of triggering fade 2 sec using css or jquery using maybe delay().

Share this post


Link to post
Share on other sites

Can't you just use percentage 0 - 50 fade in 50 to 100 fade out using a single class

 

using http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction example

div {    width: 100px;    height: 100px;    background: red;    position: relative;    animation: myfirst 2s infinite;    opacity:0;}@keyframes myfirst {    0%   {background: red; opacity: 0}        50%  {background: red; opacity: 1}       100% {background: red; opacity: 0}}

Share this post


Link to post
Share on other sites

Looking at it again, this will run fadein directly after page has loaded except images

jQuery(document).ready(function($) {$('#preloader_wrapper').addClass('preloader_fadein');});

This can be achieved sooner by placing $('#preloader_wrapper').addClass('preloader_fadein'); directly after target element instead

 

This runs after page and images have loaded

$(window).load(function(){$('#preloader_wrapper').addClass('preloader_fadeout');$('header *').css({  -webkit-animation-play-state: 'running';  -moz-animation-play-state: 'running';  -o-animation-play-state: 'running';  animation-play-state: 'running';});});

 

Share this post


Link to post
Share on other sites

Thanks, my solution for the second part is the following:

$(window).load(function(){  setTimeout(function() {    $('.preloader_wrapper').addClass('preloader_fadeout');    $('body, .header *').css({      '-webkit-animation-play-state': 'running',      '-moz-animation-play-state': 'running',      '-o-animation-play-state': 'running',      'animation-play-state': 'running'    });  }, 1500);});

 

Edited by Mad_Griffith

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...