Às vezes, no trabalho de desenvolvimento do front-end, para obter informações de imagem, precisamos obter corretamente o tamanho e o tamanho da imagem após o carregamento da imagem e executar a função de retorno de chamada correspondente para fazer a imagem produzir um determinado efeito de exibição. Este artigo organiza principalmente vários métodos comuns para julgar a conclusão do carregamento da imagem e explica e explica através da combinação de código e aplicações práticas.
Método de Onload
Execute o código Javascipt subsequente adicionando o atributo onload à tag IMG e preenchendo a função correspondente. No exemplo do código a seguir, o elemento IMG não é exibido por padrão. É determinado pela ONLOAD que a imagem é exibida após a conclusão da carga.
A cópia do código é a seguinte:
<img onload = "get (this)" src = "..." style = 'display: nenhum' />
<script type = "text/javascript">
função get (ts) {
ts.style.display = 'bloco'; // mostra fotos
}
</script>
Vantagens: A seção JavaScript Code pode ser colocada em qualquer parte da página para carregar e pode ser usada na maioria das imagens arbitrárias. É relativamente simples de usar e fácil de entender.
Desvantagens: o atributo onlaod deve ser publicado em cada tag, o que não é aplicável em alguns casos em que o código HTML não pode ser manipulado diretamente ou se o código precisar ser simplificado.
Método nativo de Javascipt
Selecione a imagem com o ID especificado, especifique o método de retorno de chamada através do ONLOAD e um prompt com a palavra "carregamento de imagem concluído" aparece após o carregamento da imagem.
A cópia do código é a seguinte:
<img id = "pic1" src = "..." />
<Script Language = "JavaScript">
document.getElementById ("pic1"). OnLoad = function () {
alerta ("carregamento de imagem concluído");
}
</script>
Vantagens: simples e fácil de usar, sem afetar o código HTML.
Desvantagens: apenas um elemento pode ser especificado e o código JavaScipp deve ser colocado abaixo do elemento da imagem
Método jQuery
Para cada evento de ligação ao elemento de imagem com a classe PIC1, o elemento aparece gradualmente através do método de carga do jQuery.
Observe que não ligue o evento de carga em $ (document) .ready ().
A cópia do código é a seguinte:
<script type = "text/javascript">
$ (function () {
$ ('. Pic1'). Cada (function () {
$ (this) .load (function () {
$ (this) .Fadein ();
});
});
})
</script>
Vantagens: os eventos de elemento podem ser vinculados em lotes e não afeta o conteúdo do código HTML
Desvantagens: é necessário o suporte da biblioteca jQuery e o código precisa ser colocado abaixo do elemento que precisa ser operado.