<div class="hidden"> won't work properly

Forum Moderators: open

Message Too Old, No Replies

<div class="hidden"> won't work properly

MingoSplash

5:48 pm on Nov 2, 2006 (gmt 0)

I am trying to load images in the cache in background for a photo gallery. I am preloading with javascript the thumbnails and first image in the <HEAD> area. I do not want to do the same with the rest of the images.

So I have this code writen:

Well, when using opera and my webpage on my local machine it works fine. When I upload the page the net and try to test it. The images do not appeared to be cached or even loaded. For example. Using the wepage on my local machine, opera says there are 71 items loading. ON the website it only says 46. The 25 images aren't being brought in. When I click on the image I have to wait for it to download (even if I wait a few minutes to make sure it had time to load (I'm using a 2500kbps connection btw)).

Anyreason why this wouldn't work? Firefox and IE work just fine.

[edited by: MingoSplash at 5:52 pm (utc) on Nov. 2, 2006]

bill

3:56 am on Nov 6, 2006 (gmt 0)

Could it be a cache issue? Are you properly clearing Opera's cache? Are you sure that all of your image paths are correct? Do you or your ISP use a proxy that might be caching these images?

KenB

4:14 am on Nov 6, 2006 (gmt 0)

I suspect Opera is just being "smart" enough to realize that since the images aren't visible they don't "need" to be downloaded. This is actually a very logical thing when you think about it.

SuzyUK

6:08 am on Nov 6, 2006 (gmt 0)

I read that it is optional for a UA to download images with, or inside any element with, the setting of display: none; - Opera seemingly have taken the option not to.

You can achieve preloading via other CSS methods if you still need to, e.g absolutely position that hidden div "off left" :

.hidden {
position: absolute;
left: -9999px;
}

or depending on your Gallery application you might be able to position the images where they're supposed to be and use z-index to toggle their display? (you can only use z-index on a relatively or absolutely positioned element)

JAB Creations

9:02 am on Nov 8, 2006 (gmt 0)

You should use z-index. Content is not supposed to be loaded when inside of any element set to display: none; so you've at least approached it half correctly initially (which is more then I can say for myself most of the time ;)).

div.body {
z-index: 1;
}
div.hidden {
z-index: 0;
}

You will have to position your body div of course.

- John