Is there a way to load an HTML string that contains image tags into jQuery without requesting the images? I want to be able to run selectors on the jQuery object to extract some information. Taking the following example:

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

The browser will make a request for /file.jpg. I'm trying to find a way to do the same but without the browser making a request for the image.

Thanks

Is there a way to load an HTML string that contains image tags into jQuery without requesting the images? I want to be able to run selectors on the jQuery object to extract some information. Taking the following example:

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

The browser will make a request for http://image.url/file.jpg. I'm trying to find a way to do the same but without the browser making a request for the image.

Thanks

• javascript
• jquery

Share Improve this question Follow asked Jun 12, 2012 at 23:20 JamieDJamieD 2,74722 gold badges2020 silver badges1919 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You can use an XML document to perform the search:

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'));​​​​

See it in action: http://jsfiddle/na9Tt/

Keep in mind it is an XML document, not an HTML document, so some particular types of searches which are specific to HTML may not work exactly the same way.

You need to be clear about the boundaries of your question. If your question is: "Is there any way you can load that exact HTML (without changing it) into a jQuery object (like you are doing) without causing the images to load", then the answer is NO. jQuery creates a temporary parent object and assigns your HTML to the innerHTML property which causes the browser to fully parse this HTML which WILL load the image URLs.

So, if you want to run selector operations on this HTML without loading the images, you have several options:

1. Modify the image tags before giving the HTML to jQuery so their .src properties are gone or are empty or the <img> tags aren't image tags or are no longer present.

2. Use something other than this type of jQuery to parse your HTML to prepare it for selector operations.

If you disclosed a little more about why you're trying to do this or what you're trying to do with the selector operations, we could perhaps suggest more alternatives.

You can add the image path to another attribute, like this

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

and then you can replace the src attribute with data-src when you need to. Something like this

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

This is Chrome only as far as I know, found it here, the first method on that page might not work if the string is not valid HTML, the second one works fine. Doesn't create requests to images and doesn't try to execute inline scripts (which is perfect for my use case - Chrome extension background tasks).

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