隐藏图像时是否下载了图像？

Question

I am using the jQuery plugin FancyBox from: http://fancybox.net/ and I'm basically using it for a "hidden gallery"; meaning the images aren't displayed on the page at all, the gallery is launched via a text link and then the user can scan through them once opened.

To achieve this I am doing something like this:

<div class="all_images">
    <a href="images/1.png" class="gallery" rel="g1"></a>
    <a href="images/2.png" class="gallery" rel="g1"></a>
    <a href="images/3.png" class="gallery" rel="g1"></a>
</div>

Then in CSS I do:

.all_images {
    display: none;
}

Now I'm wondering if the images are downloaded like this because they are hidden or does it vary by browser?

I'd probably prefer it if they didn't as some images may be large and I don't want the user downloading a bunch of images if they don't wish to view them.

Answer 1

In your example you are not displaying <img/> elements. You only have hyperlinks that will link to the image if clicked. There will be no downloading.

If they were <img/> tags, they would be downloaded even if they were set to display:none

Answer 2

If you are looking to optimize the page by removing unnecessary downloads of images. You could combine all of those images in to one big image and load this image as a background-image; You can then leverage the CSS background-position; property to use the piece of image under each item(div, a, li et-al). This way you will be making just one http request to load all the images, which is good page optimization technique and avoiding unnecessary http requests.