Mostrar una barra de carga antes de cargar toda la página

Question

Me gustaría mostrar una barra de carga antes de cargar toda la página. Por ahora, solo estoy usando un pequeño retraso:

$(document).ready(function(){ 
    $('#page').fadeIn(2000); 
}); 

La página ya usa jQuery.

Nota: He probado esto, pero no funcionó para mí:

loading bar while script runs

También probé otras soluciones. En la mayoría de los casos, la página se carga como de costumbre, o la página no se carga/muestra en absoluto.

Gracias por cualquier ayuda.

Answer 1

utilizar un div #overlay con su carga de información/.gif que cubrirá todo tu página:

<div id="overlay"> 
    <img src="loading.gif" alt="Loading" /> 
    Loading... 
</div> 

jQuery:

$(window).load(function(){ 
    // PAGE IS FULLY LOADED 
    // FADE OUT YOUR OVERLAYING DIV 
    $('#overlay').fadeOut(); 
}); 

---

He aquí un ejemplo con un Cargando barra de :

jsBin demo

<div id="overlay"> 
    <div id="progstat"></div> 
    <div id="progress"></div> 
    </div> 

    <div id="container"> 
    <img src="http://placehold.it/3000x3000/cf5"> 
    </div> 

CSS:

*{margin:0;} 
body{ font: 200 16px/1 sans-serif; } 
img{ width:32.2%; } 

#overlay{ 
    position:fixed; 
    z-index:99999; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    background:rgba(0,0,0,0.9); 
    transition: 1s 0.4s; 
} 
#progress{ 
    height:1px; 
    background:#fff; 
    position:absolute; 
    width:0;    /* will be increased by JS */ 
    top:50%; 
} 
#progstat{ 
    font-size:0.7em; 
    letter-spacing: 3px; 
    position:absolute; 
    top:50%; 
    margin-top:-40px; 
    width:100%; 
    text-align:center; 
    color:#fff; 
} 

JavaScript:

;(function(){ 
    function id(v){ return document.getElementById(v); } 
    function loadbar() { 
    var ovrl = id("overlay"), 
     prog = id("progress"), 
     stat = id("progstat"), 
     img = document.images, 
     c = 0, 
     tot = img.length; 
    if(tot == 0) return doneLoading(); 

    function imgLoaded(){ 
     c += 1; 
     var perc = ((100/tot*c) << 0) +"%"; 
     prog.style.width = perc; 
     stat.innerHTML = "Loading "+ perc; 
     if(c===tot) return doneLoading(); 
    } 
    function doneLoading(){ 
     ovrl.style.opacity = 0; 
     setTimeout(function(){ 
     ovrl.style.display = "none"; 
     }, 1200); 
    } 
    for(var i=0; i<tot; i++) { 
     var tImg  = new Image(); 
     tImg.onload = imgLoaded; 
     tImg.onerror = imgLoaded; 
     tImg.src  = img[i].src; 
    }  
    } 
    document.addEventListener('DOMContentLoaded', loadbar, false); 
}()); 

Answer 2

HTML

El javascript

$(function() { 
    $(".preload").fadeOut(2000, function() { 
     $(".content").fadeIn(1000);   
    }); 
});​ 

CSS

.content {display:none;} 
.preload { 
    width:100px; 
    height: 100px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
} 
​ 

DEMO