¿Es posible precargar los contenidos de la página con la técnica ajax/jquery?

¿Es posible precargar todos los contenidos de la página (como mostrar una barra de carga/archivo .gif animado ... o cargar texto ...) hasta que los contenidos estén completamente cargados y luego se muestren al usuario/visitante? Si esto es posible, ¿puede darme instrucciones o recursos a seguir para lograr esto? Porque pude encontrar precargadores de imágenes fácilmente, pero estoy buscando una técnica de precarga que precargue todo el contenido de la página antes de mostrarla.¿Es posible precargar los contenidos de la página con la técnica ajax/jquery?

Fuente

2009-04-08 Ahmad Fouad

No es necesario utilizar Ajax para esto. Simplemente configure el envoltorio div de la página display en none. A continuación, cámbielo a block cuando se carga el documento .

Su código podría tener este aspecto, el uso de JavaScript básico:

<script type="text/javascript"> 
    function preloader() { 
     document.getElementById("preloader").style.display = "none"; 
     document.getElementById("container").style.display = "block"; 
    } 

    window.onload = preloader; 
</script> 

<style> 
div#wrapper { 
    display: none; 
} 

div#preloader {    
    top: 0; right: 10px; 
    position:absolute; 
    z-index:1000; 
    width: 132px; height: 38px; 
    background: url(path/to/preloaderBg.png) no-repeat; 
    cursor: wait; 
    text-shadow: 0px 1px 0px #fefefe; //webkit     
} 
</style> 

<body> 
    <div id="preloader">Loading... Please Wait.</div> 
    <div id="wrapper"> 
     <!-- page contents goes here --> 
    </div> 
</body>

actualización, en jQuery:

<script type="text/javascript"> 
    // Use $(window).load(fn) if you need to load "all" page content including images, frames, etc. 
    $(document).ready(function(){ 
     $("#preloader").hide(); 
     $("#container").show(); 
    }); 
</script>

documentos relacionados: Eventos/ready, Eventos/load, CSS/css & Core/$

Fuente

2009-04-08 03:06:27 sepehr

div [id = "x"]? Seguramente solo #x? – bobince

Esto hizo el truco. Y es simple. Si tiene tiempo, por favor escriba una versión de jQuery; aunque esto funciona bien –

@bobince ¡Seguro lo mismo! ¿entonces por qué? StackOverflow considera las declaraciones con los # caracteres anteriores como un comentario en un bloque de código. simplemente usa ese #x. – sepehr

Hice algo donde necesitaba saber cuando una imagen estaba completamente cargada, así que hice la precarga con la función $.get() y pasé una función de devolución de llamada como el último parámetro. De esta manera, cuando la imagen realmente se descargó, mi devolución de llamada se activaría y sabría que el navegador ya tenía la imagen en caché.

Puede escribir una función que incrementará una variable global para cada imagen que le indique que precargue, y luego su devolución de llamada puede disminuir el contador. Cuando el contador vuelva a cero, llame a otra función. Esta función ahora se activará una vez que todas las imágenes estén precargadas.

Esto es para las imágenes. Se puede garantizar que todo lo demás se cargue cuando se active $ (document) .ready(). Entonces, si comienza su rutina en este punto, todo lo que se encuentra en la página debe cargarse.

Fuente

2009-04-08 02:24:41 Rich

Si elige un método en el que el contenido está oculto hasta que se cargue la página completa, no lo oculte inicialmente en CSS y luego oculte en JavaScript. Si lo hace, cualquier persona con JavaScript deshabilitado o no disponible no recibirá ninguna página. En su lugar, haga tanto la ocultación como la demostración del guión.

<body> 
    <script type="text/javascript"> 
     document.body.style.visibility= 'hidden'; 
     window.onload= function() { document.body.style.visibility= 'visible'; }; 
    </script>

También tenga en cuenta que el término ‘preloader’ no es realmente adecuado para lo que están haciendo aquí. 'Pre' implica que está aumentando el rendimiento al obtener la página y almacenarla en caché para que esté lista para cuando se necesite.

Pero en realidad esto es todo lo contrario: disminuye el rendimiento de esperando a que el usuario no muestre nada mientras la página se está cargando, cuando el contenido parcial está disponible. La derrota del renderizado progresivo hace que navegar sea más lento, no más rápido. Por lo general, es claramente lo incorrecto, y salvo en unos pocos casos de nicho que van con el navegador normal, la representación progresiva es la mejor. Así es como funciona la web; la gente ya está acostumbrada.

(personas, es decir, a excepción de la clase de tipos de gestión de pocas luces que realmente no se utilizan o comprenden la web, pero la demanda que el sitio de su empresa aparece a la vez.)

Fuente

2009-04-08 09:28:08 bobince

Puede hacerlo con jquery fácilmente

SCRIPT


$(window).load(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

ESTILOS


div#preloader { 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; 
}

HTML

 
div id="preloader"

Fuente

2010-11-15 08:14:56

mejor manera

 
function ajax(){ 
$('#wapal').html('path to image'); 
$.ajax({ 
     url:'somfile.php', 
     method:'get', 
     success:function(data){ 
     if(data =='') return; 
     $('#wapal').html(data); 
     } 
    }); 
}

Fuente

2011-01-13 12:43:05

Algunas modificaciones a DMus -Jerad Responda, ya que no funciona cuando Adsense está en la página.

Puede hacerlo con jQuery fácilmente.

SCRIPT

$(document).ready(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

ESTILOS

div#preloader { 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; 
}

HTML

div id="preloader"

Fuente

2012-06-23 13:23:07 tamal3053

¿Es posible precargar los contenidos de la página con la técnica ajax/jquery?

Respuesta

Cuestiones relacionadas