10

I'm using jQuery ajax request to grab and parse HTML on a secondary page.. Looking at the Network panel of both Chrome and FF, I noticed that it will load the images from there, too -- but only when I load the result using $(data) in the 'success' callback.

The content is NOT loaded into the current page's DOM, so I'm really kind of confused why this is even happening.

But in any case, simply asked, is there a way to prevent this from happening? I need to grab information from the result, but it never hits the main DOM. Will scripts that prevent image loading until view work here, or would that never fire against the loaded element? Note this is for a userscript app, so I don't quite have control over the target HTML.

Thank you!

Morgon
  • 3,109
  • 1
  • 25
  • 32

3 Answers3

9

The reason why this is happening is that as soon as you create an image with a src property, that image is loaded. For instance:

var image = document.createElement('img');
image.src = 'example.png';

The image is immediately loaded by the browser, before it is appended to the DOM. This is actually generally an optimisation. For instance, it can be used to preload images that will be used later on.

Since jQuery builds the HTML string into a DOM structure, it creates img elements in much the same way as the above snippet does. When the image element comes into existence, even before it is appended to the DOM, the file is loaded from the server.

The simplest solution would be to remove all img tags from the HTML before you append it:

html = html.replace(/<img\b[^>]*>/ig, '');

If that isn't an option and you need the img elements, you could rename the src attributes to something else, or remove the attributes if you don't need them.

lonesomeday
  • 215,182
  • 48
  • 300
  • 305
  • I like this solution; I was able to replace the 'src' attribute text with another identifier pretty quickly. – Morgon Jun 28 '11 at 16:53
1

You can find and delete all the image tags from the returned string before loading it to your DOM.

This is the regex for HTML images: 

<[iI][mM][gG][a-zA-Z0-9\s=".]*((src)=\s*(?:"([^"]*)"|'[^']*'))[a-zA-Z0-9\s=".]*/*>(?:</[iI][mM][gG]>)*
Eonasdan
  • 7,091
  • 8
  • 50
  • 77
kleinohad
  • 5,325
  • 1
  • 23
  • 32
  • Thanks for your response... The problem with that is that I actually need those image tags (among other tags, it's not just that)! Not to mention string extraction seems like it'd be pretty intensive and wasteful. .. Is there really no way to use jQuery on the target without it fully loading everything? – Morgon Jun 26 '11 at 16:00
0

Your problem is loading the response text into a jQuery element ($(data)). This actually creates a DOM for the loaded content even though you don't add it to the "main" DOM.

What you should try to do is keep this text out of jQuery and treat it either in the text level using regex, or load it into an XML document and query it with the various XML methods available.

If you want to use jQuery and stop the loading you can try reading here: Javascript: Cancel/Stop Image Requests

Community
  • 1
  • 1
Variant
  • 16,291
  • 4
  • 37
  • 64
  • I'm intrigued by the XML solution. Do you have any code that would explain this better? Are there any benefits over simply passing the sanitized response through jQuery? – Morgon Jun 28 '11 at 16:55