carga una cadena HTML en jQuery sin solicitar imágenes

Question

¿Hay alguna manera de cargar una cadena HTML que contenga etiquetas de imagen en jQuery sin solicitar las imágenes? Quiero poder ejecutar selectores en el objeto jQuery para extraer algo de información. Tomando el ejemplo siguiente:

var string = $('<p><img src="http://image.url/file.jpg" /></p>'); 
string.find('img'); 

El navegador hará una solicitud de http://image.url/file.jpg. Estoy tratando de encontrar la manera de hacer lo mismo, pero sin que el navegador solicite la imagen.

Gracias

Answer 1

tienes que ser claro acerca de los límites de su pregunta. Si su pregunta es: "¿Hay alguna forma de cargar ese HTML exacto (sin cambiarlo) en un objeto jQuery (como lo está haciendo) sin hacer que las imágenes se carguen?", Entonces la respuesta es NO. jQuery crea un objeto principal temporal y asigna su HTML a la propiedad innerHTML, lo que hace que el navegador analice por completo este HTML, lo que CARGARA las URL de la imagen.

lo tanto, si desea ejecutar operaciones selector en este código HTML sin necesidad de cargar las imágenes, tiene varias opciones:

1. modificar las etiquetas de imagen antes de dar el código HTML para jQuery por lo que sus .src propiedades se han ido o están vacíos o las etiquetas <img> no son etiquetas de imagen o ya no están presentes.

2. Use algo más que este tipo de jQuery para analizar su HTML y prepararlo para operaciones de selector.

Si da a conocer un poco más acerca de por qué usted está tratando de hacer esto o lo que estás tratando de hacer con las operaciones de selector, tal vez nos podríamos sugerir más alternativas.

Answer 2

Usted puede agregar la ruta de imagen a otro atributo, como este

<img id="imgid" src="" data-src="/path_to_image"> 

y luego se puede reemplazar el atributo src con los datos-src cuando se necesita. Algo como esto

$('#imgid').attr('src',$('#imgid').attr('data-src')); 

Answer 3

Puede utilizar un documento XML para realizar la búsqueda:

function searchXml(xmlStr, selector) { 
    var parser, xmlDoc; 
    if(window.DOMParser) { 
     parser = new DOMParser(); 
     xmlDoc = parser.parseFromString(xmlStr, "text/xml"); 
    } else { 
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
     xmlDoc.async = false; 
     xmlDoc.loadXML(xmlStr); 
    } 
    return $(xmlDoc).find(selector); 
} 

console.log(searchXml('<p><img src="http://image.url/file.jpg" /></p>', 'img').attr('src'));​​​​ 

verlo en acción: http://jsfiddle.net/na9Tt/

Tenga en cuenta que es un documento XML, no un archivo HTML documento, por lo que algunos tipos particulares de búsquedas que son específicas de HTML pueden no funcionar exactamente de la misma manera.

Answer 4

Esto es Chrome hasta donde yo sé, lo encontré here, el primer método en esa página podría no funcionar si la cadena no es HTML válido, el segundo funciona bien. No crea solicitudes para imágenes y no intenta ejecutar scripts en línea (lo cual es perfecto para mi caso de uso: tareas de fondo de extensiones de Chrome).

var doc = document.implementation.createHTMLDocument(""); 
doc.body.innerHTML = htmlString;