preloading images without javascript

[george]

Is it possible? I have a little test site where my tabs are all images. Seems to me that the tab selection would refresh a little faster if the images used were preloaded, so the browser would get them from cashe and not from the web server on each use. There must be a solution. It is not the same solution as preloading rollover images, I don't think. Suggestions? Solutions?

[Synook]

Just have a load of image tags that aren't displayed (e.g. through display:none).

[dsonesuk]

I can't see the problem with your current set up, you would only use preload images, for gallery images, or where some sort of pagination is used, to give an instant display of these images instead waiting to load.if you are talking about roll-over buttons, you could use a sprite image, which will have both instances of normal and hover-over images in one image file, which would mean both states loaded together. You would then use background image positioning to show required images on specific event.

[george]

Synook -> I'll try your idea, but I have my doubts because these images are loaded via a CSS call and not HTML tags or JavaScript functions. There is an old javaScript function that searches the DOM for all images in the document, and then loads them one by one. I'll see if I can dig it up and apply it with your idea, maybe it will work. I just don't like the delay going from tab to tab. dsonesuk -> Now you tell me about sprite images!! But actually, there are four images to a tab, and they all have to change at once. I suppose I could just make tabs using the sprite technique. Where can I find out more about it? The tabs I have are dynamic, in that the width changes depending on the length of the word in the tab, so I would have to make a sprite image for each tag. I suppose I could do it that way.

[jeffman]

Classic case for sprites. And you can combine all four states into a single image.http://www.w3schools.com/css/css_image_sprites.asp

[dsonesuk]

I know you are using one large image to account for text length etc

so I would have to make a sprite image for each tag

I'm confused by this, you are already using the same image for all tags, unless you thinking of using a different colour for each tab?you would use the same image, make the canvas twice the height (300px maybe with extra 2px) , and then make a image as an hover effect and paste it to the bottom.the only problem i see with this, is that left is assigned to li, if you could assign it to a span within a anchor, this will be a better option.then use #tabBox a:hover, #tabBox a:hover span { background-position: 0 -300px; }to display hover image

[dsonesuk]

this is an old adjusted file, that uses one sprite tab image with rounded corners left, and right, 600px high with two images of normal, hover stacked vertically.<style type="text/css">ul, li a, li a span{height: 24px; margin:0; padding:0; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:#555;}li{list-style:none;float:left; margin-right:0px;} /*margin used to separate buttons*/li a, li a span{display:block; text-decoration:none; line-height: 24px; cursor:pointer;}li a{padding-left: 10px; background: url("./tabbuttonR2.png") no-repeat top left;}li a span{padding-right: 10px; background: url("./tabbuttonR2.png") no-repeat right top; background-color:#FFF;} /*use matching background colour to match body if using images with transparent corners*/li a:hover{background: url("./tabbuttonR2.png") left -300px;}li a:hover span{background: url("./tabbuttonR2.png") right -300px; color:#00F; background-color:#FFFFFF;}/*use matching background colour to match body if using images with transparent corners*/</style><div style="display:inline-block; width: 100%;"><ul><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Profile</span></a></li><li><a href="#"><span>Other</span></a></li></ul></div><div style="clear:both;"></div><div>

[george]

I'm confused by this, you are already using the same image for all tags, unless you thinking of using a different colour for each tab?

I use two images for each tab state, one left and one right for both selected and unselected tabs, that makes four images total for all tabs on the site. Doing it like this allows each tab display to vary in width depending on the amount of text in the tab. I have not used one image for each tab, there are only four images with no wording on the images themselves. The images are background, so the wording appears on top of the image, and how much of the image displays is dependant on the length of the text in the image. I would like to know what software you use to create a sprite image. I think my problem is that when an image is loaded via CSS, it appears that the image is reloaded from the web server with each call to the CSS file. That is, it appears that the tab images are not re loaded from the client's cashe on each call to the style sheet, but are reloaded from the web server. I may be wrong about this, but the time lag when switching between tabs suggests it. Thanks for replying. And what software do you use to create sprite image?

[thescientist]

I use two images for each tab state, one left and one right for both selected and unselected tabs, that makes four images total for all tabs on the site. Doing it like this allows each tab display to vary in width depending on the amount of text in the tab. I have not used one image for each tab, there are only four images with no wording on the images themselves. The images are background, so the wording appears on top of the image, and how much of the image displays is dependant on the length of the text in the image. I would like to know what software you use to create a sprite image. I think my problem is that when an image is loaded via CSS, it appears that the image is reloaded from the web server with each call to the CSS file. That is, it appears that the tab images are not re loaded from the client's cashe on each call to the style sheet, but are reloaded from the web server. I may be wrong about this, but the time lag when switching between tabs suggests it. Thanks for replying. And what software do you use to create sprite image?

actually, CSS files are cached, so technically its not the CSS file that its going back for, its each new image asset, until it is loaded and saved in the cache as well. As far as for making sprites, you can use any basic picture creating/editing software; be it paint, gimp, or photoshop.

[dsonesuk]

Sorry, when i checked images information i saw only two images related to tabs, can't check now as link is broken.the images should be instantly stored in cache, and displayed, the only problem is that the image within the anchor will change on hover, but because the left image is outside the anchor and in the <li> tag instead, it won't react on the anchor hover state, unlike my posting of code in which it is assigned to the span tag, which is within the anchor tag.as thescientist said paint, gimp, or photoshop can be use to create sprite images. paint is found on all windows OS, gimp is free download, photoshop is a pro expensive graphics program. but you are not doing anything complicated, just creating image with height twice that of the original, creating two color states images for normal and hover (i use hue adjustment in photoshop) than pasting them onto the base, stacked above each other.transparency in imagesif you can use gif to get desired effect use gif, png tend to produce a large file size, which will slow loading and display time.if you use gif, jpg without transparency but match background colour, do this, you will end up with a much lower file size, which means quicker loading time.

[george]

Wow, seems I really do need to upgrade my picture creating/editing software, I am currently using PainShopPro version 8.1 (2003). I will look at MS Paint for this. I have put up a new problem example page . When you select a tab, you will notice that there is a space under the selected tab. Both the tab selected image and the tab not selected image are the same size. Any idea where this white space comes from? The line under the non selected tags is a CSS bottom border property, and not a line on the image. And where do the spaces to the left and right of ‘Area verbiage’ come from? Right now I am using a long thin transparent gif to force the width of the colored area where ‘Area verbiage’ is. I found that with the particular images I am using, the png file size is actually smaller than the same image as a gif. Again, this could be the age of my image creating/editing software. Thanks

[dsonesuk]

get rid of space between span tags and add padding-left:10px; to left span, and padding-right:10px; to right span

[george]

Thankyou dsonesukThe padding worked for the space under the active tab, which was a major problem. It did not work for the space to the left and right of the area under the tabs. I am trying new aproaches on that.