¿Cómo puedo devolver los datos de imagen binarios de una solicitud AJAX cancelable y establecer el resultado en el src de una imagen HTML/DOM?

Question

Estoy escribiendo una aplicación web que implica un ciclo continuo de creación (y eliminación) de un buen número de imágenes en una página web. Cada imagen es generada dinámicamente por el servidor.

var img = document.createElement("img"); 
img.src = "http://mydomain.com/myImageServer?param=blah"; 

En algunos casos, algunas de estas imágenes pierden su utilidad antes de que se terminen de descargar. En ese punto, los elimino del DOM.

El problema es que el navegador continúa descargando esas imágenes incluso después de haber sido eliminadas del DOM. Eso crea un cuello de botella, ya que tengo nuevas imágenes en espera de ser descargadas, pero tienen que esperar a que las imágenes viejas innecesarias terminen de descargarse primero.

Me gustaría abortar esas innecesarias descargas de imágenes. La solución obvia parece que sea para solicitar los datos binarios de imagen a través de AJAX (ya peticiones AJAX pueden ser abortados), y establecer el img.src una vez que la descarga se ha completado:

// Code sample uses jQuery, but jQuery is not a necessity 

var img = document.createElement("img"); 

var xhr = $.ajax({ 
     url: "http://mydomain.com/myImageServer?param=blah", 
     context: img, 
     success: ImageLoadedCallback 
    }); 

function ImageLoadedCallback(data) 
{ 
    this.src = data; 
} 

function DoSomethingElse() 
{ 
    if (condition) 
     xhr.abort(); 
} 

Pero el problema es que este línea no funciona de la manera que esperaba:

this.src = data; 

He buscado alto y bajo. ¿No hay forma de configurar una fuente de imagen para los datos de imagen binarios enviados a través de AJAX?

Answer 1

Usted tendría que base64 codificar el data en un data: URI para lograrlo. Pero no funcionaría en IE6-7, y existen limitaciones sobre la cantidad de datos que puede poner allí, especialmente en IE8. Podría valer la pena como una optimización para navegadores donde es compatible, pero no confiaría en eso.

Otro posible método es utilizar el XMLHttpRequest para precargar la imagen, luego simplemente deseche la respuesta y configure el src de un nuevo Image para que apunte a la misma dirección. La imagen debe cargarse desde el caché del navegador. Sin embargo, en el caso de que esté generando las imágenes dinámicamente, deberá prestar cierta atención a sus encabezados de almacenamiento en caché para asegurarse de que la respuesta sea cachable.

Answer 2

Prueba p. Ej.

this.src="data:image/png;base64,XXX"

... donde es XXX sus datos binarios, codificado en base 64. Ajuste el tipo de contenido si es necesario. Sin embargo, no sería optimista sobre el amplio soporte de navegador para esto.

Answer 3

Debería poder utilizar data URIs, similar a the solution que identifiqué en una pregunta anterior. Tenga en cuenta que esto no funcionará con navegadores más antiguos.