1

Preciso de um código em JavaScript que busque todas as tags img com a classe load e insira nelas a função onload="loader(this)".

A ideia nisso é que todas as imagens com a classe load recebam a função do onload que ira trocar o valor do src pelo valor do image.

Funcionaria como um plugin lazy load, mas sem APIs.

Se já existe algo do tipo aqui me indiquem o link pois não consegui encontrar algo do tipo.

3
  • Em javascript puro, ou usando alguma biblioteca, tal como o jQuery? 24/04/2014 às 22:54
  • 1
    Mas o onload não vai executar somente quando a imagem já estiver carregada? Como isso pode ser um lazy load? (E se você estiver pensando em remover o src, então o onload nunca vai executar - pois o evento de "imagem carregada" não disparará enquanto ela não for carregada de fato...)
    – mgibsonbr
    25/04/2014 às 2:18
  • José, o jeito de marcar uma pergunta como "resolvida" é escolher uma resposta e marcá-la como correta. Ou então publique sua própria solução, citando as respostas que ajudaram, e marque essa como correta.
    – brasofilo
    26/04/2014 às 15:24

2 Respostas 2

3

Creio que em vez de injectar javascript dentro do html seja melhor amarrar event handlers às imagens desejadas...

Se quer usar javascript puro pode usar assim, em duas versões +/- semelhantes:

var imagens = document.getElementsByTagName('img');
for (var i = 0; i < imagens.length; i++) {
    imagens[i].addEventListener('load', function (e) {
        loader(this)
    });
}

Exemplo online

Ou, com outro estilo de escrita:

function loader(event) {
    var estaImagem = event.target; // e usar "estaImagem" em vez de "this" como sugere
}
var imagens = document.getElementsByTagName('img');
for (var i = 0; i < imagens.length; i++) {
    imagens[i].addEventListener('load', loader)
}
0

Uma solução usando Jquery seria:

$(function(){
    $('img.load').attr('onload','loader(this)');
});

Demo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .