A veces, en el trabajo de desarrollo frontal, para obtener información de imagen, necesitamos obtener correctamente el tamaño y el tamaño de la imagen después de cargar la imagen, y ejecutar la función de devolución de llamada correspondiente para que la imagen produzca un cierto efecto de visualización. Este artículo organiza principalmente varios métodos comunes para juzgar la finalización de la carga de imágenes, y lo explica y explica a través de la combinación de código y aplicaciones prácticas.
método de carga
Ejecute el código Javascipt posterior agregando un atributo de información a la etiqueta IMG y llenando la función correspondiente. En el siguiente ejemplo de código, el elemento IMG no se muestra de forma predeterminada. Onload determina que la imagen se muestra después de completar la carga.
La copia del código es la siguiente:
<img onload = "get (this)" src = "..." style = 'Display: None' />
<script type = "text/javaScript">
función get (ts) {
ts.style.display = 'bloque'; // Mostrar fotos
}
</script>
Ventajas: la sección del código JavaScript se puede colocar en cualquier parte de la página para cargar, y se puede usar en la mayoría de las imágenes arbitrarias. Es relativamente simple de usar y fácil de entender.
Desventajas: el atributo ONLAOD debe publicarse en cada etiqueta, que no es aplicable en algunos casos en que el código HTML no se puede manipular directamente o si el código se requiere para simplificar.
Método nativo de Javascipt
Seleccione la imagen con la ID especificada, especifique el método de devolución de llamada a través de Onload, y un mensaje con la palabra "Carga de imagen completada" aparece después de cargar la imagen.
La copia del código es la siguiente:
<img id = "pic1" src = "..." />
<script language = "javaScript">
document.getElementById ("pic1"). onload = function () {
alerta ("Carga de imagen completa");
}
</script>
Ventajas: simple y fácil de usar, sin afectar el código HTML.
Desventajas: solo se puede especificar un elemento y el código Javascipt debe colocarse debajo del elemento de imagen
método jQuery
Para cada evento de enlace de elemento de imagen con la clase PIC1, el elemento aparece gradualmente a través del método de carga de jQuery.
Tenga en cuenta que no une el evento de carga en $ (documento) .ready ().
La copia del código es la siguiente:
<script type = "text/javaScript">
$ (function () {
$ ('. PIC1'). Cada (function () {
$ (this) .load (function () {
$ (esto) .fadein ();
});
});
})
</script>
Ventajas: los eventos de elementos se pueden unir en lotes y no afectan el contenido del código HTML
Desventajas: se requiere el soporte de la biblioteca jQuery y el código debe colocarse debajo del elemento que debe operarse.