Display: none, but still loaded into cache

HTML & CSS
1

Hi,

I have some img which have the display: none rule applied to them. This hides the images, but they will still be loaded into cache, right? There are quite a few of them on a page, and this slows down the loading of the page. Is there something which I can do about that?

2

Why do you have them there if they are hidden? Is this for a mobile display? One option would be to serve them as background images instead just for desktops.

3

Yes, exactly. The images are thumbnails for a gallery. I like the idea about the background images!

4

Yes, bg images are the easy way to go. But this is a big issue for mobile, and some clever people have written scripts that erve up different versions of an image for different devices, which is another option.

5

I’m also interested in this topic. How to you solve this when I have link in the image? In desktop or tablet version all images and content will load, but I would like to take out some images/content from mobile version. Currently I hide (display: none) such images that are without links, but this is not an appropriate solution. So is there any solution how could I control what kind of content or images are loaded for certain devices (based on min-width)?

6

You can set the images as background images on the links. So you can still serve the images as background images, which can then be turned off for certain devices.

7

My image is located in div named arrow and I’ve managed to add image link with tag named top. The problem is that I couldn’t make it to appear in center of page - don’t know why?! I’ve tried to use “background-position: center center” to center it, but without success. Any ideas how to solve this?

#arrow { clear: both; float: left; margin-left: 0; width: 100%; display: block; text-align: center; margin-top: 10%; }

#top { background-image: url(../images/down.png); display: block; height: 44px; width: 80px; display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; background-position: center center; }
8

I would be good to know what kind of element #top applies to. Post your HTML too. Ideally, post a live link, so we can see this in action.

9

I’ve solved this by giving “margin-left: 45%” and “margin-top: 10%” to the div tag “#top”… this way image link is almost in the middle of screen.