Impedir que las imágenes se carguen en jQuery no DOM parse

Question

Estoy usando la solicitud jQuery ajax para capturar y analizar HTML en una página secundaria .. Al mirar el panel de Red de Chrome y FF, noté que se cargará las imágenes de allí también, pero solo cuando cargo el resultado usando $ (datos) en la devolución de llamada 'exitosa'.

El contenido NO está cargado en el DOM de la página actual, así que estoy realmente confundido por qué esto está sucediendo.

Pero en cualquier caso, simplemente preguntado, ¿hay alguna manera de evitar que esto suceda? Necesito tomar información del resultado, pero nunca llega al DOM principal. ¿Serán las secuencias de comandos que impiden la carga de imágenes hasta que funcionen aquí, o nunca dispararán contra el elemento cargado? Tenga en cuenta que esto es para una aplicación de usuario, por lo que no tengo control sobre el HTML objetivo.

¡Gracias!

Answer 1

La razón por qué esto está sucediendo es que tan pronto como se crea una imagen con una propiedad src, se carga esa imagen. Por ejemplo:

var image = document.createElement('img'); 
image.src = 'example.png'; 

La imagen es inmediatamente cargado por el navegador, antes de que se anexa al DOM. Esto es en general una optimización. Por ejemplo, se puede usar para precargar imágenes que se usarán más adelante.

Dado que jQuery construye la cadena HTML en una estructura DOM, crea elementos img de forma muy similar a como lo hace el fragmento anterior. Cuando el elemento de imagen aparece, incluso antes de que se anexe al DOM, el archivo se carga desde el servidor.

La solución más sencilla sería la de eliminar todas las etiquetas img del HTML antes de añadirlo:

html = html.replace(/<img\b[^>]*>/ig, ''); 

Si eso no es una opción y que necesita los elementos img, se podía cambiar el nombre de los atributos a src algo más, o elimine los atributos si no los necesita.

Answer 2

Puede buscar y eliminar todas las etiquetas de imagen de la cadena devuelta antes de cargarla en su DOM.

Esta es la expresión regular de imágenes HTML:

<[iI][mM][gG][a-zA-Z0-9\s=".]*((src)=\s*(?:"([^"]*)"|'[^']*'))[a-zA-Z0-9\s=".]*/*>(?:</[iI][mM][gG]>)* 

Answer 3

Su problema es cargar el texto de respuesta en un elemento jQuery ($(data)). Esto realmente crea un DOM para el contenido cargado aunque no lo agregue al DOM "principal".

Lo que debe hacer es mantener este texto fuera de jQuery y tratarlo en el nivel de texto usando regex, o cargarlo en un documento XML y consultarlo con los diversos métodos XML disponibles.

Si desea utilizar jQuery y detener la carga se puede tratar de leer aquí: Javascript: Cancel/Stop Image Requests