Saber o tempo de carregamento de imagem

[matheus.labanca]

Bom dia galera.

Por acaso alguém sabe como faço pra saber o tempo que uma imagem gostou para ser carregada .

Tipo se uma imagem está carregando, não terminou e já passou 1 seg teria que abortar esse carregamento.

alguém sabe como fazer isso.

Att e obrigado desde já

[fiote]

Quando você diz "carregar" está falando de uma imagem na tela? ou de um upload de arquivos?

Se for a primeira opção, o código abaixo deve ajudar:

var img = new Image(); // criando um elemento-imagem

img.onload = function() { // funcao a ser executada quando o loading terminar
    this.fim = new Date(); // seta a data que o loading terminou 
    var diffMS = this.fim.getTime() - this.inicio.getTime(); // gera a tempo gasto no loading (em milisegundos)
    var diffS = diffMS/1000; // gera o tempo gasto em segundos
    var pts = this.src.split('/'); // gera o nome da imagem (excluindo os diretórios
    var nome = pts[pts.length-1];
    alert('A imagem '+nome+' demorou '+diffS.toFixed(2)+' segundos para carregar.'); // alerta o tempo
    document.body.appendChild(this); // joga a imagem no html
}

img.inicio = new Date(); // setando a data inicial
img.src = 'http://www.asia-turismo.com/imagens/asia-imagem.jpg'; // setando o caminho da imagem (isso inicia o loading)

[matheus.labanca]

Vlw fiote, mas não seri assim não.

Teria que saber o tempo durante o download da imagem, antes dela acabar.

Queria saber isso para mostrar uma imagem de erro quando o link de uma imagem quebra.

Resolvi mais ou menso com a função onerror.

Mas valeu a ajuda.

Abrss

[fiote]

Entendi =)

Fiz algumas mudanças no código. Você pode testá-lo nesse fiddle aqui.

// criando um elemento-imagem
var img = new Image();       

// funcao usada para descobrir (e formatar) o duração entre dois tempos
function getDuracao(inicio,fim) {   
    // gera a tempo gasto no loading (em milisegundos)     
    var diffMS = fim.getTime() - inicio.getTime(); 
    // gera o tempo gasto em segundos
    var diffS = diffMS/1000;
    // retorna o número formatado
    return diffS.toFixed(2);
}

// funcao a ser executada quando o loading terminar
img.onload = function() { 
    // seta a data que o loading terminou 
    this.fim = new Date(); 
    var duracao = getDuracao(this.inicio,this.fim);    
    // gera o nome da imagem (excluindo os diretórios
    var pts = this.src.split('/'); 
    var nome = pts[pts.length-1];
    // alerta o tempo
    alert('A imagem '+nome+' demorou '+duracao+' segundos para carregar.'); 
    // joga a imagem no html
    document.body.appendChild(this); 
}

// funcao que vamos usar pra acompanhar o tempo de loading
function verificaTempo(img) {
    // se a imagem ainda não completou o loading
    if (!img.complete) {
        // pegamos a data atual
        var agora = new Date();
        // descobrimos quanto tempo se passou
        var duracao = getDuracao(img.inicio,agora);
        // definimos um tempo limite (em segundos)
        var tempolimite = 1;
        // se já se passou mais tempo que o limite
        if (duracao > tempolimite) {
            // nesse caso apenas avisei: coloque aqui o seu código pra avisar sobre imagem quebrada
            alert('A imagem demorou mais do que '+tempolimite);
        } else {
            // se ainda não chegou ao limite, vamos verificar novamente daqui a 200 milisegundos
            setTimeout(function() { verificaTempo(img) },200);
        }
    }
}
                
// setando o caminho da imagem (isso inicia o loading)
img.src = prompt('Digite o caminho da imagem','http://www.asia-turismo.com/imagens/asia-imagem.jpg');
// setando a data inicial
img.inicio = new Date(); 
// chamamos a função para verificar o tempo de loading                       
verificaTempo(img);​

[matheus.labanca]

Brigadão fiote, vou testar aqui. vlew mesmo