Question

While testing my web app for iOS, I noticed that CSS3 animations were hardware-accelerated and wanted to switch my loading screen over to CSS3 animations.

The loading screen was a simple div that covers the screen:

.loading{
position:fixed;
top:0;
left:0;
right:0;
bottom: 0;
z-index: 10;
background-color:#000;
display: none;
}

The content of my page is loaded via AJAX. The loading div is shown when the page loads, and when the request is made again (so the AJAX request would be reloaded, updating the content). The way I did this was using:

$('.loading').show()

Before everything else, then $('.loading').fadeOout() once the AJAX request was finished.

Then with the reload button, I had the following set up:

$("#reload").on("click", function() {
    $('.loading').fadeIn()
    doAjax("http://google.com");
    $('.loading').delay(300).fadeOut()
});

That way, when the request was reloaded, it would fade in the loading screen, load the AJAX content, wait 300ms, and then fade out the div.

Now, what is the best way to transfer this all over to CSS3 animations? I was helped earlier on SO (by Duopixel) with this problem, and he was able to get this far: http://jsfiddle.net/E2Srk/

The problems with that solution are:

1. The div isn’t shown on page load. This means there is a few second delay between showing the loading screen.
2. The loading screen doesn’t fade in when the AJAX request is reloaded. It just shows, then fades out.

If anyone has any ideas on how to fix these problems, or has a better solution, that’d be great.
The

Answer 1

Action 1: Enable Fade-In

By removing transition in your .loading.animated class your fade-in problem will fix.

Action 2: Enable 3 seconds delay to fade out

To add 3 second delay I just put removeClass inside setTimeout:

setTimeout(function(){
    $('.loading').removeClass("animated");
},3000);

If you like to do it in jQuery style you can use this:

$('.loading').delay(3000).queue(function(next){
    $(this).removeClass("animated");
    next();
});

Action 3: Disable Fade-In effect in Page Load

To disable Fade-in in start I apply a trick by adding new class .firsttime to div which disabled the animation and then remove it after Ajax call, so all other calls will have fade in except first one 😉

Action 4: Display Loading without delay on Start Up

To show loading without any delay for first time I added .animated class to your div inside your html so it will show up right aways and won’t wait to JavaScript!

Action 5: Remove 3 seconds delay on Start Up

To not delay first time loading, I added a property to doAjax function to check if it’s the first time or not, and if it is, then just remove the class .animated otherwise, add 3 sec delay then delete the class.

Updated JsFiddle: http://jsfiddle.net/E2Srk/5/

I hope this fix all of your issues 🙂