php - example - ¿Es posible precargar los contenidos de la página con la técnica ajax/jquery?
jquery api docs (6)
¿Es posible precargar todos los contenidos de la página (como mostrar una barra de carga / gif animado o cargar texto) hasta que el contenido se cargue por completo y luego se muestre al usuario / visitante? Si esto es posible, ¿puede darme solo instrucciones o recursos a seguir para lograrlo? 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 que se muestre.
Hice algo donde necesitaba saber cuándo una imagen estaba completamente cargada, así que realicé la carga previa con la función $.get() y pasé una función de devolución de llamada como último parámetro. De esta manera, cuando la imagen se descargó realmente, mi devolución de llamada se dispararía y sabría que el navegador ya tenía la imagen en caché.
Puede escribir una función que incremente una variable global para cada imagen que le indique que cargue previamente, 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 cargará cuando se dispare $ (document) .ready (). Por lo tanto, si comienza su rutina en este punto, todo lo que está en la página debería estar cargado.
Mejor manera
function ajax(){ $(''#wapal'').html(''path to image''); $.ajax({ url:''somfile.php'', method:''get'', success:function(data){ if(data =='''') return; $(''#wapal'').html(data); } }); }
Puedes hacerlo fácilmente con jQuery.
GUIÓN
$(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"
Si elige un método en el que el contenido está oculto hasta que se carga toda la página, no lo tenga inicialmente oculto en CSS y luego no oculto en JavaScript. Si lo hace, cualquier persona con JavaScript deshabilitado o no disponible no obtendrá ninguna página. En su lugar, realice la ocultación y la visualización desde el script.
<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 ''precargador'' no es realmente correcto para lo que está haciendo aquí. ''pre'' implica que estás aumentando el rendimiento al hacer que la página sea buscada y almacenada en caché para que esté lista para el momento en que sea necesaria.
Pero, en realidad, esto es lo contrario: disminuye el rendimiento al no mostrar nada al usuario mientras la página se está cargando, cuando hay contenido parcial disponible. Derrotar la representación progresiva hace que la navegación sea más lenta, no más rápida. Por lo general, es claramente lo que está mal y, excepto en algunos casos de nicho, lo mejor es usar el navegador normal. Así es como funciona la web; La gente ya está acostumbrada.
(Gente, es decir, excepto por el tipo de tipos de administración poco inteligentes que realmente no usan ni entienden la web, pero exigen que el sitio de su compañía aparezca de una sola vez).
Algunas modificaciones a DMus -Jerad Answer ya que no funciona cuando adsense está en la página.
Puedes hacerlo fácilmente con jQuery.
GUIÓN
$(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"
No hay necesidad de usar Ajax para esto. Simplemente configure la display div de envoltorio de la página en none . Luego cámbielo para block cuando el documento esté cargado.
Tu código podría tener este aspecto, usando javascript de vainilla:
<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 y Core / $