Will an image load if it has its CSS set so that visibility is hidden?

Question

score 16 · Answer 1 · answered Feb 23 '09 at 16:31

16

Yes, it will still be loaded and held within the DOM. Then you can show it quickly with JS!

answered Feb 23 '09 at 16:31

adam

score 2 · Answer 2 · answered Feb 23 '09 at 16:44

2

Yes - I have used this to preload images that will be shown with Javascript.

You can verify this experimentally:

Create two relatively large images, a.jpg and b.jpg

Place an image on a page, with source of a.jpg

Write some javascript to change the image's source to b.jpg when a link is clicked (for instance, a thumbnail of b.jpg)

Load the page. Notice that when you click the link, you have to wait for b.jpg to load.

Now edit the page so that b.jpg is included on the page in the first place, but has a CSS attribute of visibility: hidden

Reload the page with Ctrl+F5. When it is finished, click the link again.

Notice that b.jpg loads much faster now. That's because it was preloaded.

answered Feb 23 '09 at 16:44

Nathan Long

1

Err. Why don't you simply setup a little html document with a non-existent image and then watch the server's log? – innaM Feb 23 '09 at 17:01
2

becasue you may not have your own server. Firebug however can also thell you this in the NET panel. – Pim Jager Feb 24 '09 at 20:19
It takes about a minute to install an HTTP server on anything... there's no reason to test anything that's eventually going to be running over HTTP like this. – Matti Virkkunen Jan 10 '13 at 09:22
1

@PimJager - good point. The Net panel in Firebug or Chrome Dev tools is a better way to see this. It will also show you if the apparent speedup is because the image is cached. – Nathan Long Jan 10 '13 at 13:44

score 1 · Answer 3 · answered Feb 24 '09 at 01:55

1

Different browsers may behave differently.

answered Feb 24 '09 at 01:55

AmbroseChapel

score 1 · Answer 4 · answered Feb 24 '09 at 20:12

1

This depends entirely upon the browser and its environment (e.g., low memory situations such as mobile phones).

answered Feb 24 '09 at 20:12

Jeremy L

4 Answers4