Welcome to WebmasterWorld Guest from 54.196.126.39

Forum Moderators: open

Message Too Old, No Replies

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

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

New User

10+ Year Member

joined:Apr 13, 2006
posts:6
votes: 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:

<div class="hidden">
<img src="images/dfdfdf.jpg" alt="" />
<img src="images/dfdfdf2.jpg" alt="" />
....
</div>

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]

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

Administrator from JP 

WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 12, 2000
posts:14981
votes: 131


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?
4:14 am on Nov 6, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 24, 2003
posts:729
votes: 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.
6:08 am on Nov 6, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 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)

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

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts:3168
votes: 22


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