FOUC - Flash Of Unscripted Content

isport59

For those that are looking for a simple page loader with transitions here is the little bit of code I used below. Works well with DataTables

It's a start.

If any body can make it better please post an update.

Q) How can I add other type transitions between pages

Here is the code I used:

$(window).load(function() {
    $('#loader').fadeOut();
    $('#preloader').delay(420).fadeOut('slow');
    $('body').delay(200).css({'overflow':'visible'});
})

##preloader  {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#f0f3f4;
    z-index:99;
 }

##loader  {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url('images/ajax-loader.gif');
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
 } 

<div id="preloader">
    <div id="loader"></div>
</div>

allan

Q) How can I add other type transitions between pages

As in the DataTables pagination, or the web-browser's pages? For DataTables, there isn't really an option - it replaces the DOM elements and immediately has then showing. For the whole page, probably best to look on SO or similar as that is outside the scope of DataTables.

Allan

isport59

FOUC - Flash Of Unscripted Content

If you come across flashing of your html before page load this is a simple solutions. Any ideals for alternate page transitions are welcome please let me know...

When using Editor with page changes you may come across this situation. For more info on FOUC...read on!

Mike