Question

I’m using $.get() in an environment that allows cross-domain HTTP requests, namely, a chrome extension. I’m using it to grab a page, and scrape off information to display to the user. This works.

The only problem is that the browser attempts to load every single image referenced in the scraped page, which both dramatically increases the data transfer, and fills up the inspector with errors when relative URLs are found.

Here’s my code:

$.get('http://somewebsite.com/page-with-lots-of-images.htm', function(data) {
    var thingsICareAbout = $(data).find('#some-id, #some-other-id');
    foo(thingsICareAbout);
});

How can I get #some-id and #some-other-id wihout loading all the images in the document?

---

EDIT: The images are only loaded once the $(data) call is made. Somehow, calling that on the html string triggers the images to load. Any alternative?

Answer 1

Unless you’re inserting this HTML into the DOM, it’s just a string and I doubt the browser would start fetching images.

Before inserting it into the DOM you could do a search-replace for src=”…” and replace it with something line xxx=”…”.