Compruebe si la imagen existe sin cargarla

Actualmente estoy usando el siguiente script en una funcionalidad flotante:

function UrlExists(url) { var http = new XMLHttpRequest(); http.open('HEAD', url, false); http.send(); return http.status!=404; } 

Carga cada imagen una detrás de otra, lo que ralentiza todo el sitio web (o incluso se bloquea).

¿Hay alguna forma de verificar si existe una imagen , aunque se evita cargarla (completamente) con javascript?

¡Muchas gracias!

Dado que JavaScript (y, por lo tanto, jQuery) es del lado del cliente y la imagen reside en el lado del servidor antes de la carga, no hay forma de verificar si la imagen existe sin usar Ajax o sus scripts del lado del servidor para asegurarse de que la imagen existe.

No hay forma de determinar el uso de javascript o jQuery si existe una imagen sin cargarla .

solución :

La única forma de comprobar si existe una imagen en el lado del servidor sería intentar cargar la imagen en un div oculto o algo así y comprobar si la imagen está ahí o no y luego mostrarla.

o puede usar algún idioma del lado del servidor de su elección como (php, asp, jsp, python, etc.) y enviar la solicitud a la imagen al idioma del lado del servidor (preferiblemente usando AJAX) y dejar que el script del lado del servidor verifique si la imagen existe o no y envía la imagen si está presente o envía un código de error si no está presente.

Así es como puedes comprobar si existe una imagen:

  function checkImage(src) { var img = new Image(); img.onload = function() { // code to set the src on success }; img.onerror = function() { // doesn't exist or error loading }; img.src = src; // fires off loading of image } 

Aquí hay una implementación de trabajo http://jsfiddle.net/jeeah/

Mi solución:

 function imageExists(url) { return new Promise((resolve, reject) => { const img = new Image(url); img.onerror = reject; img.onload = resolve; const timer = setInterval(() => { if (img.naturalWidth && img.naturalHeight) { img.src = ''; /* stop loading */ clearInterval(timer); resolve(); } }, 10); img.src = url; }); } 

Ejemplo:

 imageExists(url) .then(() => console.log("Image exists.")) .catch(() => console.log("Image not exists."));