Create an array of all images used across a site

Question

I want to be able to preload all images used in all pages of a website.

My idea is to create an array, containing all of these images.

What should be the best approach to this task?

For example – a naive question, probably – is there a way to use JavaScript to determine all image files used in all pages of the site within the same domain?

Or, alternatively, is there a way, for example, to create an array of all images contained in a certain folder?

Thank you in advance for your help!

Are you interest in detecting dynamic image use (e.g., new Image()), or do you simply want to get the initial src properties of a bunch of <img> tags? — apsillers
– apsillers, Commented Jun 24, 2013 at 14:00
The latter – the initial src properties, pretty much the paths to the image and filenames, @apsillers. — KeithRules
– KeithRules, Commented Jun 24, 2013 at 14:04

Paul D. Waite · Accepted Answer · 2013-06-24 14:14:04Z

3

In theory, you could use just JavaScript for such a thing. On page load (or document ready, or whatever), the script could:

Use getElementsByTagName() to get all links on the page
Do an XMLHttpRequest for the href of each same-domain link it finds.
Look through each response for <img> tags, and preload each one.
Look through each response for <a> tags, and repeat.

However, it'd be more efficient to maintain or generate the list of image URLs used throughout the site on the server, and include that list as a JavaScript array in the script, to avoid all the crazy AJAX image finding.

You'd want to include this script on every page on the site (as you never know what page a user will start on on your site), but save a cookie when it's run (so that it doesn't re-run on every page a given user visits).

I'd think this through carefully though. Some users could be on internet connections where their data use is limited, or charged per megabyte. Are you sure all users want to download every image on your site just from visiting one page?

edited Jun 24, 2013 at 14:14

answered Jun 24, 2013 at 14:08

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KeithRules Over a year ago

Thank you, @Paul, your answer is thorough and covers everything I wanted to know.

Collectives™ on Stack Overflow

Create an array of all images used across a site

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related