White flicker between launch image (splash screen) and app homepage

Question

I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white s

Answer 1

Alright, seems like a basic and annoying problem. I think the best way to tackle this would be via AJAX (Asynchronous JavaScript and XML). I'm sure you probably already know what this is, but it's just a way to basically send a request from JavaScript for a file elsewhere and then load it into the page or parse it however you wish.

A little more advanced approach

For your example, I recommend you comment out the line of CSS that has the background-image like this:

.bg-container {
    /* background-image: url(img/bg.png); /* commented out */
}

Note that the second comment just makes it easier to comment and uncomment the one line while debugging your code.

Now just add a simple img tag to your body, and make the src of it an ajax loader (you can find the spinning wheel generators anywhere). From here you can write some JavaScript to load the image, get rid of the spinner, and replace it.

Two simpler approaches

This solution doesn't appeal to me, I don't think most people would like it anyways. That's why I use 'Bootloader.js' which is a little AJAX loading tool I wrote a couple of months ago to help people with these sort of problems.

It's easy to use, aside from the script include, just add this meta tag:

The forms and anchors is optional, if you use it, it will make all your forms and links asynchronous (not for cross-domain use yet). The forms are not easy to setup, you can read the documentation on that if you would like.

Finally, set up your body like this:

And there you have it, this will handle everything for you.

Final suggestion

If you don't like any of these options, or want a limited yet customizable option, I recommend you use Image LazyLoader by Mika Tuupola (included with Bootloader.js) and also available at: http://www.appelsiini.net/projects/lazyload

Tell me how it goes, and what you use! XD