Kelven 1 Denunciar post Postado Maio 5, 2011 E ai galera tudo beleza, gente to querendo fazer uma coisa parecida com o efeito do google quando a gente busca imagens, não sei se vocês ja viram mas quando aparece os resutados da imagem ai você coloca o mouse sobre a imagem e ela cresce, ela aparece meio embassada com uma qualidade meio ruim, então pelo o que eu percebi, quando a imagem carrega totalmente ai ela mostra a imagem com a qualidade normal, eu queria saber se esse efeito é feito com php, ou ajax com php? e como é feito? Compartilhar este post Link para o post Compartilhar em outros sites
mexicanox 7 Denunciar post Postado Maio 5, 2011 eu faria isso com javascript, mas se voce quiser algumas solucoes AJAX etc... é so eperar mais um pouco e voce avalia o que vai ser melhor. flws Compartilhar este post Link para o post Compartilhar em outros sites
William Bruno 1501 Denunciar post Postado Maio 5, 2011 carregar com pouca qualidade, e depois mostrar a imagem certinha qndo termina de carregar. não é nenhum efeito, de nenhuma linguagem que tenhamos dominio para manipular. é coisa do navegador. e outra, ajax é javascript. Compartilhar este post Link para o post Compartilhar em outros sites
mexicanox 7 Denunciar post Postado Maio 6, 2011 e outra, ajax é javascript. Bem observado, é que na hora foi meio sem pensar hehehe flws Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Maio 6, 2011 nenhuma linguagem que tenhamos dominio para manipular. opz.... Podemos utilizar multipart William: <?php header( 'Content-Type: multipart/x-mixed-replace; boundary=image-boundary' ); $lowfh = fopen( 'low.jpg' , 'r' ); //imagem com 80Kb $highfh = fopen( 'high.jpg' , 'r' ); //imagem com 4.3 Mb echo "--image-boundary\r\nContent-Type: image/jpg\r\n"; echo 'Content-Length: ' . filesize( 'low.jpg' ) . "\r\nX-Index: 0\r\n\r\n"; while ( !feof( $lowfh ) ) { echo fread( $lowfh , 1024 ); flush(); } fclose( $lowfh ); echo "--image-boundary\r\nContent-Type: image/jpg\r\n"; echo 'Content-Length: ' . filesize( 'high.jpg' ) . "\r\nX-Index: 1\r\n\r\n"; while ( !feof( $highfh ) ) { echo fread( $highfh , 1024 ); flush(); } fclose( $high ); :D Compartilhar este post Link para o post Compartilhar em outros sites
William Bruno 1501 Denunciar post Postado Maio 6, 2011 mas ai são 2 imagens João. dessa forma, vale apena lembrar do atributo lowsrc da tag <img /> Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Maio 6, 2011 dessa forma, vale apena lembrar do atributo lowsrc da tag <img /> Exatamente, o atributo lowsrc descreve bem a situação. A única diferença é que com multipart fazemos apenas 1 requisição HTTP, o que acaba sendo mais rápido e eficiente que o lowsrc que demanda 2 requisições HTTP. :joia: Compartilhar este post Link para o post Compartilhar em outros sites
Kelven 1 Denunciar post Postado Maio 6, 2011 João não entendi essa maneira de fazer, você pode me esplicar? Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Maio 6, 2011 João não entendi essa maneira de fazer, você pode me esplicar? Não há muito o que explicar: multipart === várias partes Um exemplo tosco para você rodar ai e ver na prática o que significa multipart: Progress.php <?php class ProgressBar { private $img; private $width; private $height; private $progress = 0; private $barfill; public function __construct( $width , $height ) { $this->width = $width; $this->height = $height; $this->img = imagecreatetruecolor( $width , $height ); $this->barfill = imagecolorallocate( $this->img , 0x0 , 0x0 , 0x0 ); $bgcolor = imagecolorallocate( $this->img , 0xCC , 0xCC , 0xCC ); imagefilledrectangle( $this->img , 0 , 0 , $width , $height , $bgcolor ); $this->noise(); } private function noise() { for ( $x = 0 ; $x <= $this->width ; ++$x ) { for ( $y = 0 ; $y <= $this->height ; ++$y ) { imagesetpixel( $this->img , $x , $y, imagecolorallocate( $this->img, rand( 0 , 0xFF ), rand( 0 , 0xFF ), rand( 0 , 0xFF ) ) ); } } } public function __destruct() { imagedestroy( $this->img ); } private function draw(){ $m = $this->width - ( $this->width * 0.1 ); $w = $m * $this->progress / 100; $h = $this->height - ( $this->height * 0.1 ); $x = ( $this->width / 2 ) - ( $m / 2 ); $y = ( $this->height / 2 ) - ( $h / 2 ); imagefilledrectangle( $this->img , $x , $y , $x + $w , $y + $h , $this->barfill ); imagepng( $this->img ); } public function setProgress( $progress ) { $this->progress = (float) $progress; $this->draw(); } } Usando a barra (feia) de progresso com multipart: <?php $progress = new ProgressBar( 600 , 150 ); header( 'Content-Type: multipart/x-mixed-replace; boundary=image-boundary' ); for ( $i = 0 , $t = 10 ; $i < $t ; ++$i ) { echo "--image-boundary\r\nContent-Type: image/png\r\nX-Index: " . $i . "\r\n\r\n"; $progress->setProgress( $i * 100 / ( $t - 1 ) ); flush(); sleep( 1 ); //aguarda 1 segundo } execute no seu navegador e veja o resultado. :D Compartilhar este post Link para o post Compartilhar em outros sites
Leozitho 81 Denunciar post Postado Maio 8, 2011 Interessante João! :joia: Compartilhar este post Link para o post Compartilhar em outros sites