friskyweasel
asked on
Image caching (or lack thereof) Problem
hello all - I have some CSS menu tabs across the top of all pages which utilize 2 very small images for normal/mouseover state visuals...(when moused over, a new background image is displayed)
when tested locally, everything is fine - however when moved out to production, the loading of the background image when moused over is very slow, and there is a noticeable pause during which the menu tab image disappears all together (1-2 second), before the background image finally loads - as you can imagine this kills the mouseover effect completely
in testing, i went to the following in Internet Explorer: "Tools" > "Internet Options"
and then in the "Temporary Internet Files" section i clicked the "Settings" button
my value for "Check for newer versions of stored pages:" was set to "Every Visit to the page"...I tried changing it to "Automatically", "Never", and "Every time you start Internet Explorer"...ALL 3 of these options caused the mouseover effect to work properly, even out on production. so it would seem the problem was solved..however, i then found out that for our company it is a requirement that ALL browsers be set to "Every visit to the page"...the one setting that doesn't work....
I tried putting in a simple javascript image preload script into each page...something like this:
if (document.images)
{
//alert("fixing to preload images...");
preload_image_object = new Image();
// set image url's
image_url = new Array();
image_url[0] = "../images/MyNormalImage.g
image_url[1] = "../images/MyMouseoverImag
var i = 0;
for(i=0; i<=1; i++)
preload_image_object.src = image_url[i];
}
but it had zero effect...anyone have any ideas?
when tested locally, everything is fine - however when moved out to production, the loading of the background image when moused over is very slow, and there is a noticeable pause during which the menu tab image disappears all together (1-2 second), before the background image finally loads - as you can imagine this kills the mouseover effect completely
in testing, i went to the following in Internet Explorer: "Tools" > "Internet Options"
and then in the "Temporary Internet Files" section i clicked the "Settings" button
my value for "Check for newer versions of stored pages:" was set to "Every Visit to the page"...I tried changing it to "Automatically", "Never", and "Every time you start Internet Explorer"...ALL 3 of these options caused the mouseover effect to work properly, even out on production. so it would seem the problem was solved..however, i then found out that for our company it is a requirement that ALL browsers be set to "Every visit to the page"...the one setting that doesn't work....
I tried putting in a simple javascript image preload script into each page...something like this:
if (document.images)
{
//alert("fixing to preload images...");
preload_image_object = new Image();
// set image url's
image_url = new Array();
image_url[0] = "../images/MyNormalImage.g
image_url[1] = "../images/MyMouseoverImag
var i = 0;
for(i=0; i<=1; i++)
preload_image_object.src = image_url[i];
}
but it had zero effect...anyone have any ideas?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
hi all - sorry for the delay in responding and thanks for the ideas. I now have an example so this should make the problem much easier to understand. I tried your suggestions, making sure that i had 2 image objects created in javascript, but this didn't solve the issue.
First of all, the menu tabs i'm using are open source, and i got them here:
http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/
click the link where it says "These eleven CSS navigation menus" to see the actual menu tabs.
Now, here is an example of my current implementation, where i'm experiencing a delay before the mouseover effect happens:
http://www.webfixes.com/ee_questions/tabs_test/tabstest.htm
Note: Refer to my Internet Explorer settings above in my very first post - when set to "Every Visit to the page", I experience the delay. When set to any of the other settings, the delay disappears and everything works fine.
thanks for all the suggestions so far...
First of all, the menu tabs i'm using are open source, and i got them here:
http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/
click the link where it says "These eleven CSS navigation menus" to see the actual menu tabs.
Now, here is an example of my current implementation, where i'm experiencing a delay before the mouseover effect happens:
http://www.webfixes.com/ee_questions/tabs_test/tabstest.htm
Note: Refer to my Internet Explorer settings above in my very first post - when set to "Every Visit to the page", I experience the delay. When set to any of the other settings, the delay disappears and everything works fine.
thanks for all the suggestions so far...
ASKER
another note - this should be tested in IE only - the client will be using IE exclusively, not firefox (although i personally prefer FireFox)
ASKER
hi guys - well i finally found a fix - for the benefit of others, i'll post the fix here:
try {
document.execCommand("Back
} catch(err) {}
make sure that javascript gets executed somewhere in each page where you want to get rid of the flickering images on mouseover, and it should stop it....for those interested in learning more about the problem, you can look here:
http://www.brunildo.org/test/IEAbackima.html
and here:
http://www.mister-pixel.com/
I'm going to evenly spread the points out among you all for replying to my question and giving some good advice, even if it wasn't what caused my specific issue.
try {
document.execCommand("Back
} catch(err) {}
make sure that javascript gets executed somewhere in each page where you want to get rid of the flickering images on mouseover, and it should stop it....for those interested in learning more about the problem, you can look here:
http://www.brunildo.org/test/IEAbackima.html
and here:
http://www.mister-pixel.com/
I'm going to evenly spread the points out among you all for replying to my question and giving some good advice, even if it wasn't what caused my specific issue.
Thanks for sharing your solution found.
I agree that it is simpler but the more images he want to add the more variables he will have to manipulate. Once the images are cached, he only need to dereference the array indices
mreuring:
I agree that it is the simpler and better approach, but in response to his question, the reason the images do not appear to cache is because he is not creating a separate image object for each of his images. You provided an alternate solution to his overall problem but did not answer the question.