efeito do google imagens

[Kelven 1]

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?

[mexicanox 7]

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

[William Bruno 1501]

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.

[mexicanox 7]

e outra, ajax é javascript.

Bem observado, é que na hora foi meio sem pensar hehehe

 

flws

[João Batista Neto 448]

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

[William Bruno 1501]

mas ai são 2 imagens João.

 

dessa forma, vale apena lembrar do atributo lowsrc da tag <img />

[João Batista Neto 448]

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:

[Kelven 1]

João não entendi essa maneira de fazer, você pode me esplicar?

[João Batista Neto 448]

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

[Leozitho 81]

Interessante João! :joia: