Precargar imagenes de una web

matriax · 23 de Enero de 2008, 01:48:08 PM

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.

Martinez · 23 de Enero de 2008, 02:59:11 PM

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 · 23 de Enero de 2008, 03:01:25 PM

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

Martinez · 23 de Enero de 2008, 03:34:40 PM

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 · 23 de Enero de 2008, 03:39:41 PM

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.

Martinez · 23 de Enero de 2008, 04:00:18 PM

http://www.haan.net/js/preloader.js

Código [Seleccionar]

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.

Código [Seleccionar]



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

Código [Seleccionar]

<?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 · 23 de Enero de 2008, 05:44:05 PM

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:

Código [Seleccionar]

<?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>';
?>

Martinez · 23 de Enero de 2008, 06:36:42 PM

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

Código [Seleccionar]

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

Código [Seleccionar]



<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 · 23 de Enero de 2008, 07:26:31 PM

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:

Código [Seleccionar]

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

josepzin · 23 de Enero de 2008, 07:51:20 PM

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 · 23 de Enero de 2008, 07:54:21 PM

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.

matriax · 23 de Enero de 2008, 07:55:09 PM

Ops doble post

josepzin · 23 de Enero de 2008, 07:57:37 PM

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 · 23 de Enero de 2008, 08:34:30 PM

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

Código [Seleccionar]


<?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 · 23 de Enero de 2008, 08:44:19 PM

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

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

Código [Seleccionar]

'."\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" ¿?

Foros

Precargar imagenes de una web