Cómo usar el evento de información de imagen en JavaScript

En JavaScript, la imagen "encendidoEl evento ocurre cuando la imagen se carga correctamente en una página web. Esta característica se puede utilizar cuando necesitamos cargar imágenes en nuestras páginas web para que sean atractivas. El evento de información de imagen también se utiliza en el desarrollo de sitios web que muestran las imágenes, logotipos y pancartas de los productos.

Este artículo resaltará el evento de información de imagen usando JavaScript.

Cómo usar el evento JavaScript de imagen de imagen?

Puede utilizar los siguientes métodos para realizar la operación del evento de información de imagen en JavaScript:

• QuerySelector ()
• Función definida por el usuario

Ahora pasaremos por cada uno de los enfoques mencionados uno por uno!

Método 1: Use el evento de información de imagen en JavaScript con el documento.QuerySelector ()

El "documento.QuerySelector ()El método "se utiliza principalmente para devolver el primer elemento que coincide con un selector particular dentro del documento. Por ejemplo, se puede utilizar para definir un evento para acceder a una imagen desde el archivo HTML.

El ejemplo dado a continuación usará el documento.Método QuerySelector () para definir una imagen en el evento de carga.

Ejemplo

Primero, agregaremos la fuente de la imagen "SRC"En el archivo HTML:

Ahora, muévase al archivo JavaScript y llame al "addEventListener ()Método "con el objeto de la ventana. Este método se utilizará para agregar un oyente de eventos para cargar la imagen deseada con la ayuda del "documento.QuerySelector ()" método. Después de eso, agregue una alerta emergente con el mensaje indicado:

ventana.addEventListener ("Load", event =>
var img = documento.QuerySelector ('img');
alerta ("La imagen se carga correctamente");
);

Por último, especifique la fuente del archivo JavaScript en la etiqueta de cabeza o cuerpo:

Abrir el archivo HTML dado mostrará la siguiente salida:

Después de cargar la imagen seleccionada, el siguiente cuadro de alerta también aparecerá con un mensaje:

Método 2: Use el evento de Onload de imagen en JavaScript con la función definida por el usuario

También se puede utilizar una función definida por el usuario para la imagen en el proceso de carga, a la que se accede en "Html"Archivo a través de"encendido". Esta función devolverá el estado de la imagen en un cuadro de alerta.

Consulte el siguiente ejemplo para comprender el concepto declarado.

Ejemplo

Primero, definiremos un "ImageOnload ()"Función y muestre el estado de la imagen que se cargará a través del cuadro de alerta:

función imageOnload ()
alerta ("La imagen se carga correctamente");

A continuación, agregaremos la ruta de la imagen que debe descargarse y llamar a la definida "ImageOnload ()" funcionan como "encendido" evento. Además, también especificaremos la fuente del archivo JavaScript en el archivo HTML:

lt; img src = "e: \ Job Technical Artículos \ Imagen.Png "onload =" imageOnload () ">

Producción

Hemos proporcionado diferentes métodos para usar el evento de información de imagen en JavaScript.

Conclusión

Para usar el evento de información de imagen en JavaScript, puede usar el documento.Método de QuerySelector () o función definida por el usuario. En el primer enfoque, el método addEventListener () se llama con el objeto de la ventana utilizado para agregar un oyente de eventos al documento.método QuerySelector (). Para el segundo enfoque, se puede crear un objeto definido por el usuario, al que se accede en el archivo HTML a través del evento Onload. Esta redacción discutió el método para usar un evento de JavaScript en Onload.