CODEWITHSUNDEEP
javascriptjquerydom
Chris Dutrow
Chris Dutrow

Reputation: 50362

Prevent "jQuery( html )" from triggering the browser to request images and other referenced content

Using jQuery to create new DOM elements from text.

Example:

jQuery('<div><img src="/some_image.gif"></img></div>');

When this statement is executed, it causes the browser to request the file 'some_img.gif' from the server.

Is there a way to execute this statement so that the resulting jQuery object can be used from DOM traversal, but not actually cause the browser to hit the server with requests for images and other referenced content?

Example:

var jquery_elememnts = jQuery('<div><img class="a_class" src="/some_image.gif"></img></div>');
var img_class = jquery_elememnts.find('img').attr('class');

The only idea I have now is to use regex to remove all of the 'src' tags from image elements and other things that will trigger the browser requests before using jQuery to evaluate the HTML.

How can jQuery be used to evaluate HTML without triggering the browser to make requests to the server for referenced content inside the evaluated HTML?

Thanks!

Upvotes: 3

Views: 537

Answers (4)

eongoo
eongoo

Reputation: 11

var jquery_elememnts = (new DOMParser()).parseFromString('<div><img class="a_class" src="/some_image.gif"></img></div>', 'text/html'); 
var img_class = jQuery(jquery_elememnts).find('img').attr('class');

Upvotes: 1

blobmaster
blobmaster

Reputation: 853

if you do the regexp way, maybe a simple one like

    htmlString.replace(/[ ]src=/," data-src=");

will do the job ?

so instead of looking for :

    jquery_elememnts.find('img').attr('src');

you will have to look for :

    jquery_elememnts.find('img').data('src');

Upvotes: 5

Jo&#227;o Silva
Jo&#227;o Silva

Reputation: 91299

That's not possible afaik. When the browser loads an HTML fragment, such as one containing an img, which references another resource via src, it will try to fetch it.

However, if you only need to get the class attribute from the img, you can use $.parseXML() to obtain an XMLDocument, and then process it to get the required attribute. This way, the HTML fragment will never be loaded, and thus the image will not be fetched:

var jquery_elememnts = $.parseXML('<div><img class="a_class" src="http://4.bp.blogspot.com/-B6PMBqTyqpk/UC7syX2eRLI/AAAAAAAABL0/SEoLWoxgApo/s1600/google10.png"></img></div>');
var img = jquery_elememnts.getElementsByTagName("img")[0];
var img_class = img.getAttribute("class");

DEMO.

Upvotes: 2

Diode
Diode

Reputation: 25135

You can use parseXML in jQuery. 

var elements = jQuery.parseXML('<div><img class="a_class" src="/some_image.gif"></img></div>');
var img_class = $(elements).find('img').attr('class');
alert(img_class);

The string should be a perfect XML. This is a workaround I used for a similar purpose, but don't know whether this will solve your issue.

Upvotes: 1

Related Questions