Iframe page load transition

I use this to attempt a smooth transition between pages and trying to remove a “white flash” look with page loads in the frame.

<iframe class="main" style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="information.asp" frameBorder="0" name="content"></iframe>

Question: Is this the best method to accomplish a similar “AJAX” type page load look (smooth and seamless) ?

Thank you

I am not 100% certain what you mean by “white flash” but I can only assume you mean when it shows a white page before loading all the images and such.

I am also not sure exactly how that iframe is implementing anything but hiding the frame until it is loaded and then suddenly showing the entire frame. What you might want to take a look at is CSS transitions and animations. They are much easier to implement than you might think and can give you a really nice transition if don’t correctly. The art will be just when to apply the transitions.

For instance, to have an image fade into view, you can set an opacity transition to an image, start it off with opacity: 0, then when loaded have it apply a CSS class which will make it transition to opacity: 1.

You could also think about applying these transitions to elements like the body tag, headers etc. Check out the below link for examples of page transitions using these types of techniques…

I hope this is what you are referring to. :slight_smile: