Preloader en archivo.php ?

[jvmjunior]

Hola,

He programado una web que muestra imágenes, lo malo que el usuario tiene que mirar todo mientras se carga, me han sugerido que le programe un preloader....

He intentado usar librerías como Queryloader pero no me funciona :(

Alguien me puede indicar por favor como se hace un preloader en un php???

Muchas gracias de antemano.

Saludos.

[Hidek1]

podrías escupir la información al navegador con flush.. asi te evitas cargar todo antes de q pueda ver el contenido

www.php.net/flush


saludos.

[zerpico_01]

http://www.forosdelweb.com/f13/consu...agenes-133711/

[jvmjunior]

Muchas gracias por contestar.....

Con el tema del flush no me aclaro y no va con la idea de mostrar algo mientras se carga la página.

El enlace de zerpico_01, aunq el título diga preolader, está orientado a rollober y tratamiento de imágnes con javascript, cosa que no tiene que ver mucho con preloader en php.

No pensé que algo tan común de ver en la web me costase encontrar la forma de hacerlo..

espero me ayuden.

Gracias.

[Ronruby]

Te refieres a algo como esto?
http://blog.unijimpe.net/fancyupload/
http://digitarald.de/project/fancyupload/

[Heli0s]

Iniciado por jvmjunior

No pensé que algo tan común de ver en la web me costase encontrar la forma de hacerlo..

Segun tengo entendido, PHP al ser un lenguaje de servidor no puede hacer que el navegador precarge las imagenes, el navegador no sabe si la pagina usa PHP o no, no tiene comunicación directa con PHP, eso se debe hacer con javascript que es el que se comunica con el navegador.

Un saludo

[waltercaraza]

Exacto Heliios estas muy enterado, lo que tu quieres hacer no se puede hacer con php, tienes que utilizar para ello un framework de javascript te recomiendo el jquery aqui tengo un ejemplo sencillo de como lo implementarlo espero te sirva:

Creo una funcion

function cargarModelos(producto)
{
if($("#modelos").empty()){ // preguntas si el div donde se mostraran las imagenes sigue vacio
$("#modelos").html('<div style="margin-left:440px;height:216px;"><br /><br /><br /><br /><br /><img src="{/literal}{$baseRoot}{literal}/images/loading.gif"/><br />Cargando...</div>'); // utilizando la funcion .html() agregas el loading.gif adicionalmente tu puedes darle mas estilos
}

$.ajax({ // opcionalmente puedes ejecutar algun evento con ajax
url:'{/literal}{$baseRoot}/ajax/{literal}' + producto + '/cargar-modelos-marca/{/literal}{$marca->key}/{$marca->id}{literal}',
type: 'POST',
success: function(html){
$('#modelos').html(html);
}
});
}
});

para mas info descargarte en manual de jquery en su web oficial.

Saludos.

[Ronruby]

Ahhhhhh ... Ya entiendo que es lo que quieres. Una vez vi un script que hacia eso, pero eso es con Javascript, no con PHP

[jvmjunior]

En todo caso, al decir PHP yo me refiero a un archivo.PHP en el que estoy programando, que no sé si eso tenga que ver o no al final (propiamente a un archivo con extensión PHP solo eso)

He probado varios scripts pero no logro dar con la solución :(

[marlanga]

Hace tiempo encontré un preloader para hacer lo que tú pides fácilmente. le quité la morralla y dejé ésto:

Código PHP:

  <?php
$imagenes=array("img1.jpg","img2.jpg","img3.jpg","img4.jpg");
?>
<SCRIPT> 
    //Para imagenes en arrays javascrip
    var imagenes=["img1.jpg","img2.jpg","img3.jpg","img4.jpg"];
    //Para imagenes cargadas en arrays de PHP
    var imagenes=<?php echo json_encode($imagenes); ?>
    //Objeto cargador. NO TOCAR.
    var cargador={onComplete:function(){},onLoaded:function(){},current:null,qLength:0,images:[],inProcess:false,queue:[],queue_images:function(){var arg=arguments;for(var i=0;i<arg.length;i++){if(arg[i].constructor===Array){this.queue=this.queue.concat(arg[i])}else if(typeof arg[i]==='string'){this.queue.push(arg[i])}}},process_queue:function(){this.inProcess=true;this.qLength+=this.queue.length;while(this.queue.length>0){this.load_image(this.queue.shift())}this.inProcess=false},load_image:function(imageSrc){var th=this;var im=new Image;im.onload=function(){th.current=im;th.images.push(im);(th.onLoaded)();if(th.queue.length>0&&!th.inProcess){th.process_queue()}if(th.qLength==th.images.length){(th.onComplete)()}};im.src=imageSrc}}
    
    //Definimos la funcion oncomplete, que se ejecutará cuando se carguen todas las imágenes. Solo se ejecuta una vez, como es obvio.
    cargador.onComplete=function (){
            //Poner visible la capa donde están las fotos, o lo que sea.
    }
    
    //Esta función se disparará una vez por cada foto cargada.
    cargador.onLoaded=function(i){
        //la imagen del array con índice i acaba de cargarse con éxito
        //Podemos utilizar esta función para hacer una barra de loading típica de 0% a 100%
    }
    
    //Con esta orden le pasamos al objeto cargador el array de imágenes a cargar.
    cargador.queue_images(imagenes);
    //Con esta orden ponemos las imágenes a cargar.
    cargador.process_queue();

} 
</SCRIPT>  

Las imágenes <IMG src="img1.jpg" />, etc, tienes dos opciones:
Las metes en un div de inicio, junto al resto de la página, que inicialmente está con display:none o visibility:hidden, o creas el objeto IMG con javascript con CREATEELEMENT y APPENDCHILD para meterlas donde quieras.