.jpg)
Fecha de publicación: 06/11/2014
Función que realiza una precarga de imágenes mientras se está cargando la página web. Su uso es bastante sencillo y os lo expondré en estos pasos:
1) Inserción de función en javascript
fichero_javascript.js
function precargar(){
var contenedorimg='contenedor';
imgs = document.images;
precargadas = true;
for (var i = 0, total = imgs.length; i < total; i ++){
precargadas = (precargadas && imgs[i].complete);
if (imgs[i].complete){
var x=$('#'+contenedorimg).find('img[src$="'+imgs[i].src+'"]');
if (x.length>0){
if (!x.is(':visible')){
x.parent().parent().css('background','black');
x.fadeIn("slow");
}
}
}
}
if (!precargadas){
setTimeout("precargar()", 10);
}
}
Lo primero que haremos será insertar la función precargar en nuestro fichero de javascript. En esta función tendremos que indicar el elemento que contiene las imágenes que se van a precargar cambiando la propiedad contenedorimg.
Es decir, que si tenemos esta estructura por ejemplo:
fichero_html.html
//...
<div id="contenedor">
<ul>
<li><a href="#"><img src="imagen1.jpg" /></a></li>
<li><a href="#"><img src="imagen2.jpg" /></a></li>
<li><a href="#"><img src="imagen3.jpg" /></a></li>
<li><a href="#"><img src="imagen4.jpg" /></a></li>
<li><a href="#"><img src="imagen5.jpg" /></a></li>
<li><a href="#"><img src="imagen6.jpg" /></a></li>
<li><a href="#"><img src="imagen7.jpg" /></a></li>
</ul>
</div>
//...
Sólo tendríamos que poner en la variable contenedorimg el valor contenedor ya que este elemento es el que contiene todas las imágenes que vamos a precargar.
2) Llamada de la función
Como último paso sólo tenemos que llamar a la función cuando iniciemos el DOM:
fichero_javascript.js
$(document).ready(function(){
precargar();
});