tags:

views:

187

answers:

4

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

+14  A: 

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

adam
+3  A: 

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.
  • Nathan Long
    Err. Why don't you simply setup a little html document with a non-existent image and then watch the server's log?
    innaM
    becasue you may not have your own server. Firebug however can also thell you this in the NET panel.
    Pim Jager
    A: 

    Different browsers may behave differently.

    AmbroseChapel
    +1  A: 

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

    Nerdling