3

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!

Ash Burlaczenko
  • 24,778
  • 15
  • 68
  • 99
Chris Dutrow
  • 48,402
  • 65
  • 188
  • 258
  • Would it be an option to strip the src-attribute from the string before passing it to the jQuery function? – Christofer Eliasson Sep 09 '12 at 19:26
  • Take a look at http://stackoverflow.com/questions/476679/preloading-images-with-jquery You could also just try throwing the images you want to pre-load at the bottom of the page in a `
    ` tag with `display` set to `none`. Then, all of the images that you want to use later in your DOM objects will have already be loaded onto the user's computer.
     – Lil' Bits Sep 09 '12 at 19:28

4 Answers4

5

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');
blobmaster
  • 853
  • 8
  • 11
2

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.

João Silva
  • 89,303
  • 29
  • 152
  • 158
1

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.

Diode
  • 24,570
  • 8
  • 40
  • 51
1
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');
eongoo
  • 11
  • 2
  • It would be nice if you could add a bit of explanation to the source code you provided. – Risadinha Aug 31 '15 at 08:22
  • This way will not causes the browser to request the file 'some_image.gif' from the server. – eongoo Aug 31 '15 at 08:38
  • If you use $.parseXML to parse the whole webpage source code, for example retrieved by ajax, will causes an error, Invalid XML.Then, you can use this way do your job. – eongoo Aug 31 '15 at 08:48