?
Solved

Image caching (or lack thereof) Problem

Posted on 2007-10-18
8
Medium Priority
?
437 Views
Last Modified: 2013-12-08
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.gif";
      image_url[1] = "../images/MyMouseoverImage.gif";

       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?
0
Comment
Question by:friskyweasel
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 668 total points
ID: 20104622
You need a separate image object for every image. Try this:
if (document.images)
{
      //alert("fixing to preload images...");
      preload_image_object = null;

      // set image url's
      image_url = new Array();
      image_url[0] = "../images/MyNormalImage.gif";
      image_url[1] = "../images/MyMouseoverImage.gif";

       var i = 0;
      for(i=0; i<=1; i++)
      {
            preload_image_object = new Image();
              preload_image_object.src = image_url[i];
            image_url[i]=preload_image_object;
      }
}
0
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 668 total points
ID: 20104731
That script can be simplified to this:

<html>
<head>
<script>
var imgNorm = new Image();
var imgHeigh = new Image();
imgNorm.src  = "../images/MyNormalImage.gif";
imgHeigh.src = "../images/MyMouseoverImage.gif";
</script>
</head>
<body...


0
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 664 total points
ID: 20104799
I recommend a different technique of doing your mouse-overs. Use sprites instead of swapping images. The idea is that you put the normal state and the hover state in the same image, with some space in-between. Then when the user hovers over the tab you displace the image instead of swapping to a different one. That way you'll never have caching problems again because you'll never need to load a new images :)

Your css could be as simple as:
.tab {
  background: transparent url(../images/mytabsprite.gif) no-repeat 0 0;
}

.tab:hover {
  background-position: -50px 0;/*Move sprite to the next tab state*/
}
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 82

Expert Comment

by:hielo
ID: 20105000
Zvonko:
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.
0
 

Author Comment

by:friskyweasel
ID: 20111279
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...
0
 

Author Comment

by:friskyweasel
ID: 20111301
another note - this should be tested in IE only - the client will be using IE exclusively, not firefox (although i personally prefer FireFox)
0
 

Author Comment

by:friskyweasel
ID: 20111567
hi guys - well i finally found a fix - for the benefit of others, i'll post the fix here:

try {
  document.execCommand("BackgroundImageCache", false, true);
} 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.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20111604
Thanks for sharing your solution found.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Following on from our article on "The Murky World of Consent and opt in", we thought we would issue some helpful guidance, not only on consent itself but knowing what information you are capturing, what you are doing with this data and how you can p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question