Display: none, but still loaded into cache


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?

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.

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

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.

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)?

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.

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; }

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.

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.