Question

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!

Answer 1

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