tüm sayfanızı kapsayacak sizin yükleme bilgi/.gif ile bir div #overlay
kullanın:
<div id="overlay">
<img src="loading.gif" alt="Loading" />
Loading...
</div>
jQuery: Burada
$(window).load(function(){
// PAGE IS FULLY LOADED
// FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
bir Yükleme çubuğu ile bir örnek :
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);
}());
Güzel! Herhangi bir "yan etki" olmadan çalışır. Çok teşekkür ederim! –
"Yan etkiler" olmadığından emin misiniz? Hatırlıyorum .load(), sayfadaki tüm görüntülerin tam bir yükü gibi bazı öğeleri beklemiyordu. ** Düzenleme: ** İyi hatırlamıyordum, herhangi bir yan etkisi olmamalı, [burada neden bir açıklama var] (http://ablogaboutcode.com/2011/06/14/how-javascript-loading- iş-domcontentloaded-and-onload /) –
Bu cevabın biraz eski olduğunu anlıyorum, ancak kullanıcı javascript devre dışı bırakılmışsa güzel bir şekilde bozulacak bir çözüm olup olmadığını merak ediyordum. Çünkü şu anda bir web sitesi için bir yükleme gifiyle sonuçlanacaklar. – arandompenguin