Ho creato una semplice pagina Web con le immagini ma quando un utente va a visitarlo, il browser carica le immagini una alla volta. Quindi, l'utente vede prima la prima immagine, poi la seconda immagine e così via.Come precaricare una pagina Web prima di mostrarla?
Voglio invece che prima appaia una gif di caricamento al centro della pagina Web e quindi, quando tutte le immagini sono scaricate, mostra l'intera pagina web all'utente.
Come posso fare questo?
È possibile mostrare un'immagine loader mettendola in qualche im <img> tag e utilizzare al di sotto del codice js per nascondere in un secondo momento, quando vengono visualizzate tutte le immagini:
window.onload = function(){
var el = document.getElementById('elementID');
el.style.display = 'none';
};
dove si suppone elementID per essere l'ID di loader elemento/tag.
I load evento viene generato quando tutte le immagini/fotogrammi/risorse esterne vengono caricati, quindi per il momento che gli incendi di evento, tutte le immagini vengono caricate e pertanto nascondere il messaggio/caricamento delle immagini qui.
È possibile farlo con JQuery. Di 'la tua pagina si presenta così:
<body>
<div id='loader'>Loader graphic here</div>
<div id='pagecontent' style='display:none'>Rest of page content here</div>
</body>
Si può avere una funzione di jQuery per mostrare pagecontent quando l'intera pagina viene caricata:
$(document).ready(function() {
$(window).load(function() {
$('#loader').hide();
$('#pagecontent').show();
});
});
Edit: Mi rimetto a Keltex's answer. Si tratta di una soluzione molto migliore. Lascerò il mio qui per i posteri (a meno che non debba cancellare il contenuto e la mia risposta interamente? Sono nuovo qui).
Un'altra soluzione, utilizzata abbastanza frequentemente in passato, consiste nel creare una pagina di destinazione che precarica tutte le immagini. Quando viene eseguito il preloading, reindirizza al sito reale. Al fine di far funzionare tutto questo, avresti bisogno di ottenere gli URL a tutte le immagini che si desidera caricare, e poi fare qualcosa di simile:
# on index.html, our preloader
<script type='text/javascript'>
// add all of your image paths to this array
var images = [
'/images/image1.png',
'/images/image2.png',
'/images/image3.png'
];
for(var i in images) {
var img = images[i];
var e = document.createElement('img');
// this will trigger your browser loading the image (and caching it)
e.src = img;
}
// once we get here, we are pretty much done, so redirect to the actual page
window.location = '/home.html';
</script>
<body>
<h1>Loading....</h1>
<img src="loading.gif"/>
</body>
aaahhh ... il bellezza della vecchia scuola ... + 1 !! :) – NoobEditor
<div id="preloader">
<div id="loading-animation"> </div>
</div>
<script type="text/javascript">
/* ======== Preloader ======== */
$(window).load(function() {
var preloaderDelay = 350,
preloaderFadeOutTime = 800;
function hidePreloader() {
var loadingAnimation = $('#loading-animation'),
preloader = $('#preloader');
loadingAnimation.fadeOut();
preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>
#preloader {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
position: fixed;
background-color: #fff;
}
#loading-animation {
top: 50%;
left: 50%;
width: 200px;
height: 200px;
position: absolute;
margin: -100px 0 0 -100px;
background: url('loading-animation.gif') center center no-repeat;
}
Cr mangia un div con il preloader del nome di classe e metti un caricatore dentro quel div.
stile il preloader di classe, proprio come sotto
.preloader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: white;
/* background-color is would hide the data before loading
text-align: center;
}
Html
<div class="preloader">
Any loader image
</div>
Jquery
$(window).load(function(){
$('.preloader').fadeOut(); // set duration in brackets
});
una semplice pagina caricatore è pronto ....
In questo caso se l'utente non ha attivato javascript quindi non vede il div #pagecontent. Destra ? – xRobot
Non è il '$ (document) .ready (function()' abbastanza ridondante? '$ (Window) .load' sparerà anche se è fuori dal blocco. –
Hai ragione, la maniglia' ready' potrebbe probabilmente essere rimosso, ma non danneggerà nulla – Keltex