javascript - termine - mostrar loading mientras carga pagina jquery

Cómo cancelar la carga de una imagen

Question

Supongamos en Javascript que asigna el SRC a una etiqueta IMG. Es un SRC grande y desea cancelarlo antes de que termine de cargarse. Asignar el SRC a otra imagen no detendrá la carga de los datos.

Es decir, en el medio de la carga puede asignar el SRC a otra imagen más pequeña y la imagen más pequeña se cargará y aparecerá en su navegador. Sin embargo, el SRC original continúa descargando.

Del mismo modo, eliminar el nodo IMG no impedirá que el SRC siga descargando. Sin conjeturas, por favor, mira los pasos de repro.

REPRO

(1) Cargue esta URL en Chrome en Windows: http://68.178.240.17/imgLoadTest/imgLoadTest.htm

(2) Abra el panel del desarrollador presionando CTRL-SHIFT-J

(3) En la fila superior de iconos en el panel de desarrollador de Chrome, haga clic en el icono de Red para ver la actividad de la red.

(4) En la página web cargada en el Paso 1, haga clic en el botón Cargar imagen y mire el panel del desarrollador como una imagen grande (32 megas) que comienza a cargarse.

(5) En la página web, haga clic en el botón Probar para cancelar para cargar una imagen diferente.

(6) Se carga una imagen pequeña, pero observe la red en el panel del desarrollador y observe que la imagen grande continúa descargándose.

Answer 1

Aunque ahora no puedo encontrar el informe de errores, creo que este es un error WebKit registrado desde hace mucho tiempo. Firefox (y IE, creo) tienen un comportamiento más sano. Volveré un poco en mi cerebro, pero si recuerdo en esos navegadores, restablecer el img.src de hecho cancelará las descargas pendientes. Estoy seguro de que Firefox hace esto cuando una descarga está "esperando en línea" para tener la oportunidad de una conexión HTTP abierta, y me parece recordar que a veces forzará conexiones cercanas.

Nunca he encontrado la forma de persuadir a los navegadores basados ​​en WebKit para que cancelen una descarga de img en curso, ya sea que esté en cola o que ya se esté descargando activamente.

Esto realmente apesta si estás haciendo algo así como un cliente de mapeo y necesitas un control más detallado sobre las imágenes.

Answer 2

Establecer la propiedad .src en una cadena vacía debería cancelar la carga:

//load image from url
var img = new Image();
img.src = ''http://somedomain.com/image.jpg'';

......

//cancel load
img.src = '''';

Answer 3

Actualizado

Establecer el atributo src de la etiqueta img en la cadena vacía interrumpirá la descarga actual, incluso en Chrome.

Hoy en día, la mayoría de los navegadores implementaron ese mecanismo fuera de estándar pensado en la respuesta anterior para abortar la conexión mediante programación. Esto no se logra mediante una solicitud de protocolo, sino con una operación en memoria del lado del cliente. Tenga en cuenta que no es un comportamiento estándar, pero la mayoría de los proveedores son cortesía. Es decir, no podría funcionar en todos los navegadores.

Preparé un jsfiddle mostrando este mecanismo en acción ( observe el panel de red del inspector).

ANTIGUA RESPUESTA (2011)

Su navegador solicita esa imagen con una solicitud HTTP GET específica, como se especifica en el protocolo HTTP. Una vez que lo solicita, el servidor http inicia la transferencia.

Por lo tanto, se encuentra entre el navegador (como cliente http) y el servidor http.

Dado que el protocolo http no tiene en cuenta la opción de abortar una transferencia, el navegador debe implementar un mecanismo fuera de norma para abortar la conexión mediante programación. Pero como esto no está especificado en ningún estándar, creo que no encontrarás ninguna forma de hacerlo con javascript o cualquier código del lado del cliente.

Answer 4

Sí, la página se descarga dos veces en Android cuando una etiqueta img tiene un atributo src = "".
Esto todavía ocurre en las versiones recientes de Android.
No he encontrado ningún otro navegador que haga eso.
Pero encontré una solución: use una etiqueta img sin el atributo src.

Answer 5

la propiedad src debe ser una URL válida no vacía. Por lo tanto, la cadena nula o vacía no es legal (aunque a veces funcionan).

USe: img.src=''http://xxxx''; img.onerror=null; img.src=''http://xxxx''; img.onerror=null;

(ver aquí )

Answer 6

Cancele con GIF transparente codificado en base64 para evitar solicitudes adicionales y carga de doble página en Android:

var img = new Image();
img.src = ''http://google.com/favicon.ico'';

img.src = ''data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=;''