He creado una página web simple con imágenes, pero cuando un usuario va a visitarla, el navegador carga las imágenes de a una por vez. Entonces, el usuario ve primero la primera imagen, luego la segunda y así sucesivamente.¿Cómo precargar una página web antes de mostrarla?

Quiero, en cambio, que primero aparezca un gif cargado en el centro de la página web y luego, cuando se descarguen todas las imágenes, mostrar toda la página web al usuario.

¿Cómo puedo hacer esto?

2010-12-31 xRobot

Puede mostrar una imagen de carga al ponerlo en algún lugar im <img> etiqueta y utilizar a continuación el código JS para ocultarlo más adelante, cuando se muestran todas las imágenes:

window.onload = function(){ 
    var el = document.getElementById('elementID'); 
    el.style.display = 'none'; 
};

donde se supone que elementID a ser el ID del cargador elemento/etiqueta.

Los load activa el evento cuando se cargan todas las imágenes/cuadros/recursos externos, por lo que en el momento en que se desencadena el evento, todas las imágenes se cargan y, por tanto, que ocultan el mensaje/carga de imágenes aquí.

Fuente

2010-12-31 17:33:40 Sarfraz

Puede hacerlo con JQuery. Digamos que su página se ve así:

<body> 
    <div id='loader'>Loader graphic here</div> 
    <div id='pagecontent' style='display:none'>Rest of page content here</div> 
</body>

Puede tener una función jQuery para mostrar PageContent cuando se carga la página completa:

$(document).ready(function() { 
    $(window).load(function() { 
     $('#loader').hide(); 
     $('#pagecontent').show(); 
    }); 
});

Fuente

2010-12-31 17:41:34 Keltex

En este caso, si el usuario no ha activado javascript, entonces no verá el div #pagecontent. Correcto ? – xRobot

¿No está el '$ (document) .ready (function()' bastante redundante? '$ (Window) .load' se activará incluso si está fuera del bloque. –

Tiene razón, el identificador' ready' podría probablemente ser eliminado, pero no va a doler nada. – Keltex

Editar: delego en Keltex's answer. Es una solución mucho mejor. Dejaré el mío aquí para la posteridad (a menos que deba eliminar el contenido y mi respuesta por completo. Soy nuevo aquí).

Otra solución, que se usaba con bastante frecuencia en el pasado, es crear una página de inicio que precarga todas sus imágenes. Cuando finaliza la precarga, redirige al sitio real. Para que esto funcione, lo que se necesita para obtener las direcciones URL a todas las imágenes que desea cargar, y luego hacer algo como esto:

# 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>

Fuente

2010-12-31 17:42:12

aaahhh ... el belleza de la vieja escuela ... + 1 !! :) – NoobEditor

HTML

<div id="preloader"> 
    <div id="loading-animation">&nbsp;</div> 
</div>

JavaScript

<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>

CSS

#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; 
}

Fuente

2013-11-04 03:32:54 Syed

Cr Eate un div con preloader de nombre de clase y poner un cargador dentro de ese div.

estilo el preloader clase al igual que a continuación

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

Un cargador simple página está listo ....

Fuente

2015-04-17 10:33:27 Dark

¿Cómo precargar una página web antes de mostrarla?

Respuesta

HTML

JavaScript

CSS

Cuestiones relacionadas