Estoy tratando de verificar si una imagen que se proporciona a través de un enlace está cargada o no. Así es como compruebo actualmente si está cargado o no:

 $(`#${imgID}`) .on('error', function (err) { this.imageIsValid = false; }) .on('load', function (res) { this.imageIsValid = true; });

Estoy cargando un elemento img con un enlace provisto y estoy escuchando los dos eventos 'error' y 'load' para verificar si la imagen está cargada. Esto funciona para la mayoría de las imágenes, pero no siempre. Por ejemplo tengo estas dos fotos:

imagen uno

imagen dos

Ambas imágenes activan el evento 'cargar' y se cargan en la página. Pero cuando elimino alguna parte del enlace, la primera imagen devuelve el evento 'error' y la segunda no. La razón de esto es que el segundo enlace redirige a una imagen vacía de 16x9 px y, por lo tanto, se activa el evento 'cargar'. Las propiedades naturalHeight/naturalWidth y complete también son válidas. Para ambas imágenes, se registra un mensaje 404 en la consola.

Para verificar si la primera solicitud devuelve una mala respuesta, intenté verificar el img con una solicitud GET normal. El problema aquí es que funciona para la segunda imagen pero no para la primera porque ahora estoy recibiendo errores cors. Y si cors cancela una solicitud, no puede obtener la respuesta de la solicitud.

Entonces mi pregunta es: ¿Hay otra forma de verificar si la imagen se puede cargar o no?