Will an image load if it has its CSS set so that v

问题:

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

回答1:

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

回答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.

回答3:

Different browsers may behave differently.

回答4:

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