Estoy cargando imágenes (grandes) dinámicamente para dibujar en un lienzo html5, algo como esto:
var t = new Image(); t.onload = ... t.src = 'http://myurl';Pero de vez en cuando me gustaría cancelar la solicitud de imagen por completo.
La única forma en que se me ocurrió es establecer src en '' . es decir
t.src = ''Esto funciona en muchos navegadores, pero parece que solo Firefox cancela la solicitud http de la imagen.
Probé esto con Fiddler2 al deshabilitar el almacenamiento en caché y habilitar "emular la velocidad del módem". Luego, ejecute un violín para probar la cancelación de una solicitud de imagen. (Me encantaría escuchar otras ideas sobre cómo probar esto)
Sé que hay formas de cancelar todas las solicitudes ( como en esta pregunta ), pero me gustaría cancelar solo una.
¿Alguna idea sobre otras formas (especialmente en navegadores móviles) para hacer esto?
Esta es la única forma en que logré que funcionara en todos los navegadores modernos (Chrome, Safari, Mobile-Safari, Firefox e IE9).
iframe vacío y ocultoimage tag al body en el iframeimg.onload , puede usar ese elemento dom de imagen para dibujar en un lienzo html5 con drawImage()stop() en contentWindow del iframe (o execCommand("stop", false) en contentDocument en IE).Creé una clase para esto y puse el código de coffeescript (y está compilado javascript) en github: Cancelable Html5 Image Loader
Si quieres jugar con él, también creé un jsfiddle para probarlo . Recuerde iniciar Fiddler2 (o algo similar) para ver que la solicitud de red real realmente se cancela.
Puede probar window.stop() para detener todas las solicitudes, pero no las individuales. En IE, no es window.stop() es document.execCommand("Stop", false).
Si tiene otras cosas en marcha en cuanto a la solicitud, entonces hacer esto interferirá con eso. (Haría un seguimiento con una nueva solicitud de los recursos que aún desea, pero eso se parece demasiado al trabajo duro).
Entonces, si quisiera detener una sola solicitud de una imagen grande, lo que podría hacer es cargar la imagen en un documento dentro de un IFRAME oculto. El evento de carga del IFRAME se puede usar para cargar la imagen en el documento principal, momento en el que debería almacenarse en caché (suponiendo que tenga las directivas de almacenamiento en caché configuradas para hacerlo).
Si la imagen tarda demasiado, puede acceder a la ventana de contenido de IFRAME y emitir un comando de detención.
Debe tener tantos elementos IFRAME como imágenes que se pueden solicitar simultáneamente.
Dudo que haya una forma de navegador cruzado para hacer que esto suceda sin hacks. Una sugerencia es realizar una solicitud AJAX a un script del lado del servidor que devuelve una versión codificada en Base64 de la imagen que luego puede establecer como el atributo src . Luego puede cancelar esta solicitud si decide cancelar la carga de la imagen. Sin embargo, esto podría ser difícil si desea mostrar la imagen progresivamente.