Stratos: Punto de Encuentro de Desarrolladores

¡Bienvenido a Stratos!

Acceder

Foros





Precargar imagenes de una web

Iniciado por matriax, 23 de Enero de 2008, 01:48:08 PM

« anterior - próximo »

matriax

Hola,

Si he visto codigos para precargar imagenes de una web, pero todos son del tipo:

<SCRIPT LANGUAGE="JavaScript">
if (navigator.appVersion.substring(0,1) >= 3) {
i1=new Image;
i1.src='image1.gif';
i2=new Image;
i2.src='image2.gif'';
}
</SCRIPT>

No hay alguna codigo al cual le digas que quieres precargar todas las imagenes/ficheros de una determinada carpeta? en lugar de ir añadiendo las imagene o ficheros 1x1....

Saludos.
Pagina Oficial: http://www.taykron.com
Flash Portal : http://www.arkatia.com
Blog Personal : http://matriax.blogspot.com/

Martinez

Busca a ver si exite una funcion parecida a opendir en JavaScript, abres el fichero y lees todos los archivos, y si es una imagen la muestras.

Si el servidor tiene PHP es sencillo, en esta web tiene un ejemplo:
http://www.javascriptkit.com/javatutors/externalphp2.shtml

Funcion opendir:
http://es2.php.net/function.opendir

tamat

no acabo de entenderlo, como se supone que un javascript (que se ejecuta en local) va a saber cuantos archivos hay en una carpeta remota? :-m
Por un stratos menos tenso

Martinez

tamat es cierto, yo es que de javascript ni idea.

Realmente si puedes acceder al contenido de una carpeta remota en local a traves del protocolo ftp . Pero claro debes tener y configurar el servidor ftp .
ftp://ftp.rediris.es/

Sin duda lo mejor es apoyarse en un script que se ejecute en el servidor (por ejemplo PHP) y pasarle a javascrit un array con el contenido de la carpeta.

matriax

Hola,

Yo no entiendo nada de javascript por eso lo preguntaba.

Sobre, lo que decis pues nose, pero en teoria si se puede hacer:

http://javascript.internet.com/image-effects/image-preloader.html

Segun dice, con cargar ese .js e indicarle la carpeta donde estaran las imagenes y la extension de las mismas las precargara.

A ver si alguien puede mirarlo o echarle un ojo a ver. Yo esta tarde lo probare a ver si funciona. Como digo es eso, algo que precargue las imagenes de una determinada carpeta, para que cuando cargues la web tenerlas ya en cache y la navegacion sea mas fluida.
Pagina Oficial: http://www.taykron.com
Flash Portal : http://www.arkatia.com
Blog Personal : http://matriax.blogspot.com/

Martinez

http://www.haan.net/js/preloader.js
preload('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');

Lo que hace es crear un array con los nombres de los archivos que le pases asi no tienes que poner /images/1.jpg

This script will preload images to enable your pages to load faster.

Lo que quiere decir que precarga para que la visualizacion sea mas rapida, pero no dice que muestre todas las que hay, de hecho no pone en el documento los tags <img src=...>, por lo que seguimos en las mismas, cada vez que quieras añadir una imagen nueva hay que editar el .js. Si tienes PHP en el servidor usalo como script.



<?php$dir=opendir&#40;"midir"&#41;while&#40;&#40;$file=readdir&#40;$dir&#41;&#41;!=NULL&#41;&#123;    // Evaluar si es una imagen sino continue;    echo '<img src="midir/'.$file.'">';&#125;?>



Resisa el codigo xq me lo he inventado sobre la marcha.


EDIT: Me acabo de dar cuenta que el codigo que he puesto no precarga, sino que carga. Para precargar valdia este codigo:

<?php$dir_name="midir";$dir=opendir&#40;$dir_name&#41;;$i=0;while&#40;&#40;$file=readdir&#40;$dir&#41;&#41;!=NULL&#41;&#123;	if&#40;/* Si no es una imagen*/&#41;		 continue;	$files[$i++&#93;=$file;&#125;if&#40;count&#40;$files&#41;==0&#41;	return;	echo '<script type="text/javascript"> var brochure = new Array&#40;&#41;;';for&#40;$i=0; $i<count&#40;$files&#41;; $i++&#41;	echo&#40; 'brochure['.$i.'&#93; = new Image&#40;&#41;; brochure[i&#93;.src =\''.$dir_name.'/'. $files[$i&#93;.'\';' &#41;;	echo '</script>';?>



Esto debe ir en la cabecera (<head>).

matriax

Pues el codigo no va....

Me sale casi todo en gris ya que hay un " ' " sin colocar bien, ademas lo coloco donde creo que esta correcto, pero el ultimo "</script>" me sale en gris asi que tampoco creo que eso este correcto.

En teoria Martinez con lo que has hecho bien corregido y tal, podria precargar cualquier archivo de la carpeta que yo le mande?

AL rpincipio de todo de la pagina me sale como error:
var brochure = new Array();'; for($i=0; $i'; ?>

El codigo que he puesto dentro del head es este:
<?php$dir_name="midir";$dir=opendir&#40;$dir_name&#41;;$i=0;while&#40;&#40;$file=readdir&#40;$dir&#41;&#41;!=NULL&#41;&#123;   if&#40;/* Si no es una imagen*/&#41;       continue;   $files[$i++&#93;=$file;&#125;if&#40;count&#40;$files&#41;==0&#41;   return;   echo '<script type="text/javascript"> var brochure = new Array&#40;&#41;;';for&#40;$i=0; $i<count&#40;$files&#41;; $i++&#41;   echo&#40; 'brochure['.$i.'&#93; = new Image&#40;&#41;; brochure[i&#93;.src =\''.$dir_name.'/'. $files[$i&#93;.'\';' &#41;;   echo '</script>';?>
Pagina Oficial: http://www.taykron.com
Flash Portal : http://www.arkatia.com
Blog Personal : http://matriax.blogspot.com/

Martinez

Sq el phpBB no es muy bueno para hacer codigo XD.

<?php$dir_name="midir";$dir=opendir&#40;$dir_name&#41;;$i=0;while&#40;&#40;$file=readdir&#40;$dir&#41;&#41;!=NULL&#41;&#123;   if&#40;/* Si no es una imagen*/&#41;       continue;   $files[$i++&#93;=$file;&#125;if&#40;count&#40;$files&#41;==0&#41;   return;   echo '<script type="text/javascript"> 			window.onload = function&#40;&#41; &#123; 				var brochure = new Array&#40;&#41;;';for&#40;$i=0; $i<count&#40;$files&#41;; $i++&#41;   echo&#40; '   	brochure['.$i.'&#93; = new Image&#40;&#41;; 	brochure['.$i.'&#93;.src =\''.$dir_name.'/'. $files[$i&#93;.'\'';	' &#41;;   echo '&#125;</script>';?>




Me sobraba un comilla simple.
Te deberia salir algo asi:


<script type="text/javascript">
window.onload = function() {
var brochure = new Array();

brochure[0] = new Image();
brochure[0].src ='midir/im1.jpg';
brochure[1] = new Image();
brochure[1].src ='midir/im2.jpg';
}</script>

matriax

Sinceramente no te entiendo que codigo pongo? con lo que has puesto no es lo mismo que el codigo de la web que te he puesto ¿?

Con este codigo:
<?php$dir_name="midir";$dir=opendir&#40;$dir_name&#41;;$i=0;while&#40;&#40;$file=readdir&#40;$dir&#41;&#41;!=NULL&#41;&#123;   if&#40;/* Si no es una imagen*/&#41;       continue;   $files[$i++&#93;=$file;&#125;if&#40;count&#40;$files&#41;==0&#41;   return;   echo '<script type="text/javascript">         window.onload = function&#40;&#41; &#123;            var brochure = new Array&#40;&#41;;';for&#40;$i=0; $i<count&#40;$files&#41;; $i++&#41;   echo&#40; '      brochure['.$i.'&#93; = new Image&#40;&#41;;   brochure['.$i.'&#93;.src =\''.$dir_name.'/'. $files[$i&#93;.'\'';   ' &#41;;   echo '&#125;</script>';?>


Cuando cargo la pagina al principio de todo me sale esto:
Citarwindow.onload = function() { var brochure = new Array();'; for($i=0; $i'; ?>

Y eso que dices de "Te deberia salir algo asi: " ¿? No es lo mismo que poner para cada imagen una linea de codigo? para eso utilizo el anterior codigo.... no entiendo nada....
Pagina Oficial: http://www.taykron.com
Flash Portal : http://www.arkatia.com
Blog Personal : http://matriax.blogspot.com/

josepzin

Yo odio profundamente ese tema de precargar las imagenes...

Si es para un menú, los hago con CSS y él solito se encarga de cargar y mantener en memoria todo.
Sino, que cargue a su ritmo cada imagen :P

matriax

Sobre todo son para las imagenes tipo cuando pasas el mouse por encima, que no tenga que cargas la imagen y salir, si no que ya esten todas esas, y cuando pases por encima pues ya este.

Pero tambien me interesa cargar algunas imagenes tipo screenshots para que la navegacion y tal vaya mas rapida.

Aunque a este paso me temo que voy a tener que hacr una linea de codigo para cada imagen XD.
Pagina Oficial: http://www.taykron.com
Flash Portal : http://www.arkatia.com
Blog Personal : http://matriax.blogspot.com/

matriax

Pagina Oficial: http://www.taykron.com
Flash Portal : http://www.arkatia.com
Blog Personal : http://matriax.blogspot.com/

josepzin

Si es para menús, es mucho mejor usar CSS y para las capturas de pantalla,  no te compliques la vida! que se carguen a su ritmo.

Menú hecho con imágenes y CSS: http://www.jaloque.com/
(los 3 botones de arriba)

Martinez

YAAAA TAA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Me baje el appserv y lo probe, ya ta arreglado el codigo


<?php$dir_name="appserv";if&#40;is_dir&#40;$dir_name&#41;==false&#41;	return;$dir=opendir&#40;$dir_name&#41;;$pattern="&#40;\.jpg$&#41;|&#40;\.png$&#41;|&#40;\.jpeg$&#41;|&#40;\.gif$&#41;"; //valid image extensions$i=0;while&#40;&#40;$file=readdir&#40;$dir&#41;&#41;!=NULL&#41;&#123;	if&#40;eregi&#40;$pattern, $file&#41;&#41;		$files[$i++&#93;=$file;&#125;if&#40;count&#40;$files&#41;==0&#41;   return;   echo '<script type="text/javascript">'."\n\t".	'window.onload = function&#40;&#41;'."\n\t&#123;\n\t\t".	'var brochure = new Array&#40;&#41;;';for&#40;$i=0; $i<count&#40;$files&#41;; $i++&#41;   echo&#40; "\n\t\tbrochure[".$i."&#93; = new Image&#40;&#41;;"   	."\n\t\tbrochure[".$i."&#93;.src ='".$dir_name."/". $files[$i&#93;."';"&#41;;   echo "\n\t&#125;\n</script>";?>


Hasta te lo he puesto bonito para cuando veas el codigo. Una cosa en dir_name no pongas "midir/" que sino las imagenes se pondrian: midir//img.png

matriax

CitarYAAAA TAA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

He subido la web al servidor y cuando carga la web y todo me sale al principio:

'."\n\t". 'window.onload = function()'."\n\t{\n\t\t". 'var brochure = new Array();'; for($i=0; $i"; ?>

¿Que pasa?, aunque eso solo me sale en Firefox en IE parece que va bien....

Edit: En IE no sale ese error pero tampoco me Precarga las imagenes. En "miDir" tengo que poner la URL relativa que seria "imgs" o tengo que ponerla toda "Http://www.web.com/imgs" ¿?
Pagina Oficial: http://www.taykron.com
Flash Portal : http://www.arkatia.com
Blog Personal : http://matriax.blogspot.com/






Stratos es un servicio gratuito, cuyos costes se cubren en parte con la publicidad.
Por favor, desactiva el bloqueador de anuncios en esta web para ayudar a que siga adelante.
Muchísimas gracias.