Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Micilini Roll

obter o tempo gasto para carregar imagem

Por , em Javascript

Recommended Posts

Micilini Roll    49

Micilini Roll
Postado

pessoal eu tenho este diretoria da imagem :

images/imagem_carregar.png

 

eu quero um comando javascript que pegue esta imagem e carregue na pagina,so que envez de carregar na pagina ele na verdade ira calcular o tempo gasto,necessario para carregar esta imagem,alguem me ajuda...

 

 

caso nao entender é mais ou menos isso aqui que to querendo fazer:

 

 

Quando o usuário clica em "iniciar teste", um arquivo de 100KB é transferido e juntamente ao início da transferência desse arquivo é iniciado um cronômetro que pára quando o arquivo for completamente transferido. Tendo estes dados, fazemos um cálculo simples de tamanho do arquivo (kb) sobre tempo (s) gerando a notação kbps (kilobit por segundo) que é mostrada para você.

A partir daí fazemos outros cálculos simples para exibir os outros valores. Para "estatísticas de sua conexão", basta dividirmos o resultado em kbps por 8, pois como vimos acima, passa o valor de kbps para KB/s.

A qualidade da conexão é mostrada de acordo com a velocidade obtida em kbps. Se for inferior a 56kbps, são mostrados os valores "baixa/baixa", se forem acima de 56kbps porém abaixo de 128 kbps são mostrados os valores "alta/média", caso a velocidade seja superior a 128kbps, são mostrados os valores "alta/alta".

Compartilhar este post

Link para o post
Compartilhar em outros sites

rodrigopa    7

rodrigopa
Postado

Você tem que salvar o tempo de inicio e de término do carregamento da imagem, algo parecido com isso:

var comeco;
var fim;
var tamanho = 10479; // TAMANHO DA IMAGEM EM KILOBYTES
window.onload = function() {
	comeco = new Date().getTime();
	document.getElementById('imagem').src = 'imagem.jpg?' + comeco; // EVITAR O CACHE DA IMAGEM
	document.getElementById('imagem').onload = function() {
		fim = new Date().getTime();
		console.log('A imagem foi carregada totalmente...');
		console.log('------------------------------------');
		console.log('O tempo de carregamento da imagem foi de ' + parseInt( fim - comeco ) + ' milisegundos');
		console.log('------------------------------------');
		console.log('A velocidade da sua internet é de ' + (tamanho / parseInt(parseInt( fim - comeco ) / 1000, 10)) + ' KB/S');
	}
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Micilini Roll    49

Micilini Roll
Postado

ok muuuuuuuuuito obrigado mas kkk ainda nao testei vamos la,o comando:

 

var tamanho = 10479;

 

é o tamanho da imagem certo?! de que imagem? desta?

 

.src = 'imagem.jpg?'

 

 

entao aonde esta escrito imagem,jpg eu coloco o diretorio aonde esta a minha imagem,depois eu vejo o tamanho desta imagem e jogo neste comando:

 

var tamanho = 10479; // TAMANHO DA IMAGEM EM KILOBYTES

 

 

estou certo ou errado?!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Micilini Roll    49

Micilini Roll
Postado

ai rodrigo :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
var comeco;
var fim;
var tamanho = 2590.72; // TAMANHO DA IMAGEM EM KILOBYTES
window.onload = function() {
	comeco = new Date().getTime();
	document.getElementById('imagem').src = 'olyng - 2.0/desing/1280x1024.png?' + comeco; // EVITAR O CACHE DA IMAGEM
	document.getElementById('imagem').onload = function() {
		fim = new Date().getTime();
		console.log('A imagem foi carregada totalmente...');
		console.log('------------------------------------');
		console.log('O tempo de carregamento da imagem foi de ' + parseInt( fim - comeco ) + ' milisegundos');
		console.log('------------------------------------');
		console.log('A velocidade da sua internet é de ' + (tamanho / parseInt(parseInt( fim - comeco ) / 1000, 10)) + ' KB/S');
	}
}
</script>

<body>

<div id="imagem">
</div>

</body>
</html>

 

 

deixei assim meu codigo ate coloquei uma div com nome imagem e mesmo assim o comando nao funciona pq?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

isso aqui:

<div id="imagem">

teria q ser uma tag img

Compartilhar este post

Link para o post
Compartilhar em outros sites

Micilini Roll    49

Micilini Roll
Postado

ata seguinte troquei div por img e deixei o src em branco e o console log nao funciona tive de mudar para alert aonde somente era necessario

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
var comeco;
var fim;
var tamanho = 2590; // TAMANHO DA IMAGEM EM KILOBYTES
window.onload = function() {
	comeco = new Date().getTime();
	document.getElementById('imagem').src = 'desing/1280x1024.png?' + comeco; // EVITAR O CACHE DA IMAGEM
	document.getElementById('imagem').onload = function() {
		fim = new Date().getTime();
		console.log('A imagem foi carregada totalmente...');
		console.log('------------------------------------');
		console.log('O tempo de carregamento da imagem foi de ' + parseInt( fim - comeco ) + ' milisegundos');
		console.log('------------------------------------');
		alert('A velocidade da sua internet é de ' + (tamanho / parseInt(parseInt( fim - comeco ) / 1000, 10)) + ' KB/S');
	}
}
</script>

<body>

<img src="" id="imagem" />


</body>
</html>


mas uma duvida! pq o console.log nao mostra nada...mesmo no servidor quanto no localhost

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mostra sim, só q vc tem q estar com a aba console do Firebug aberta.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito