Wyświetl pasek ładowania przed załadowaniem całej strony

Question

Chciałbym wyświetlić pasek ładowania przed załadowaniem całej strony. Na razie używam tylko małego opóźnienia:

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

Strona już korzysta z jQuery.

Uwaga: Próbowałem, ale to nie działa dla mnie:

loading bar while script runs

Próbowałem również inne rozwiązania. W większości przypadków strona ładuje się jak zwykle, inaczej strona nie zostanie załadowana/wyświetlona w ogóle.

Dziękuję za pomoc.

Answer 1

Użyj div #overlay ze swoim Info Załadunek/.gif, które obejmie wszystkie strony:

<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(); 
}); 

---

Oto przykład z barem Ładowanie :

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

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