2009-05-30 20 views
41

Tengo un sitio web que hace un uso intensivo de Ajax. Ocasionalmente, necesito cargar archivos de imágenes grandes en la página para el usuario. Mi pregunta es, cuando estos archivos de imágenes grandes se están descargando, ¿hay alguna forma de detenerlos si, por ejemplo, el usuario navega fuera de la página que muestra la imagen? Gracias.Javascript: Cancelar/Detener solicitudes de imagen

+0

¿Se da cuenta de que el navegador * no * cancela las descargas cuando navega fuera de una página? Estoy de acuerdo en que debería. Sin embargo, también podría imaginar fácilmente que diferentes navegadores podrían tener un comportamiento diferente. Desafortunadamente. – Bruce

+2

Bueno, esta es una aplicación ajax, así que nunca dejo la página, sin embargo, traté de 'salir' de la página y para mi sorpresa, la imagen NO detiene la descarga. Guau. No esperaba eso. Estoy usando FF 3.0.10/IE8 y Fiddler para ver el tráfico. – frio80

Respuesta

55

que tenían el mismo problema exacto, cuando rápidamente los resultados de búsqueda de los usuarios a través paginados '(Ajax) el navegador todavía estaba tratando de descargar imágenes de perfil para cada página y no sólo la actual. Este código funcionó para mí, llamado en el caso de paginación justo antes de la nueva búsqueda se llevó a cabo:

//cancel image downloads 
if(window.stop !== undefined) 
{ 
    window.stop(); 
} 
else if(document.execCommand !== undefined) 
{ 
    document.execCommand("Stop", false); 
} 

Esencialmente es como hacer clic en el botón "Stop" en el navegador.

Probado en IE, Firefox, Chrome, Opera y Safari

+0

Gracias taaaaan mucho MyWhirledView. He estado lidiando con esto por días. – Alex

+1

Lamentablemente esto no funciona en safari :( – Alex

+6

Este * does * funciona en Safari ... ver el problema similar y corregirlo aquí: http://stackoverflow.com/questions/3146200/stop-loading-of-images- on-a-hashchange-event-via-javascript-or-jquery –

2

Suponiendo que está utilizando ajax para cargar las imágenes, puede simplemente cancelar la solicitud en el evento window.onunload. Declare una variable global para el objeto XMLHttpRequest que está utilizando.

var xhr; 
//if using the XMLHttpRequest object directly 
//you may already be doing something like this 
function getImage(...){ 
    xhr = new XMLHttpRequest(); 
    xhr.open(....); 
} 

si se utiliza jQuery, podría asignar el valor devuelto por la llamada que .ajax $() o $ .get a XHR variable.

xhr = $.ajax(.....); 

Manejar la ventana.desconectar y cancelar la solicitud.

window.onunload = function(){ 
    xhr.abort(); 
} 
+0

No estoy usando ajax para cargar las imágenes. Pensé que configurar src = '' haría el truco pero no es así. Lo que realmente estoy buscando es un document.getElementById ('image'). StopLoading(); :) – frio80

-3

La solución Mans pobres sería establecer simplemente la propiedad SRC de la etiqueta de imagen para una cadena vacía, o apuntar hacia un widget.

edición

vi tu comentario, sorprendió que no funciona con el cambio de la propiedad SRC para vaciar ... trate de usar un blank.gif o algo así.

Si eso no funciona, puede estar limitado por la arquitectura del navegador, lo que significa que usted es S.O.L.

0

La reasignación de la etiqueta SRC a una imagen diferente no funciona en IE7, continúa intentando descargar la primera imagen.

Aquí está la disposición:

creé un controlador HTTP que es de tipo JPEG. Contiene código que nunca termina de ejecutarse. Entonces, algún Image.src = myhandler.ashx se sentará allí cargando hasta agotarlo.

En medio de esto, pulse otro botón que vuelve a asignar la imagen a un archivo de imagen pequeña: someImage.src = small.jpg

La solicitud de myhandler.ashx no termina, a pesar de que hemos reasignado el src.

Por otra parte, si en realidad se elimina el nodo someImage.parentNode.removeChild (someImage) está todavía sigue tratando de descargar myhandler.ashx

Probado con IE7 y monitoreado con el reloj HTTP Pro.

+0

Tengo una sección de nuestra página que quiero que pare toda la carga de imágenes. He encontrado para IE si voy al nodo padre y configuro innerHTML en "", aborta todas las solicitudes bastante muy bien. Esto solo funciona para IE, Safari y Firefox continuarán cargando las imágenes aparentemente sin importar nada (haciendo clic en el botón de detención de forma programada no es adecuado para mí por otros motivos) –

3

les gusta esto.

$(img).attr('src',''); 
Cuestiones relacionadas