title: Preloading images not working in Firefox?
body: <p>I am preloading images like so:</p>
  
  <pre><code>$(function() {
  window.onload = function() {
  
  // Preloading colorized hover images
  var bildliste_color = new Array();
  var j;
  for (j = 0; j &lt; 14; j++)    { 
      bildliste_color[j] = "images/works/work_art/middle/work_middle_art" + (j+1) + ".png";
  }
  
  var image_color = new Array();
  for (j=0; j &lt; bildliste_color.length; j++) {
          image_color[j] = new Image();
          image_color[j].src = bildliste_color[j];
  }
  
  
  // Preloading work_art_large_images
  var bildliste_large = new Array();
  var i;
  for (i = 0; i &lt; 14; i++) {
          bildliste_large[i] = "images/works/work_art/large/work_large_art" + (i+1) + ".png";
          console.log(i);
          console.log(bildliste_large[i]);
  
  }
  var image_large = new Array();
  for (i=0; i &lt; bildliste_large.length; i++) {
      image_large[i] = new Image();
          image_large[i].src = bildliste_large[i];
  }
  }
  
  
  
  });
  </code></pre>
  
  <p>I am preloading those images so that these are being cached and not being dowloaded again, when they are needed on hover.I achieved that with the jquery hover function like so:</p>
  
  <pre><code>$(document).ready(function() { 
  $("#incontent_work_art img").hover(function() {
      oldsrc = $(this).attr("src"); 
      var newsrc = $(this).attr("src").replace("images/works/work_art/middle/work_middle_art01sepia.png", "images/works/work_art/middle/work_middle_art1.png"); 
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art02sepia.png", "images/works/work_art/middle/work_middle_art2.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art03sepia.png", "images/works/work_art/middle/work_middle_art3.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art04sepia.png", "images/works/work_art/middle/work_middle_art4.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art05sepia.png", "images/works/work_art/middle/work_middle_art5.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art06sepia.png", "images/works/work_art/middle/work_middle_art6.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art07sepia.png", "images/works/work_art/middle/work_middle_art7.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art08sepia.png", "images/works/work_art/middle/work_middle_art8.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art09sepia.png", "images/works/work_art/middle/work_middle_art9.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art10sepia.png", "images/works/work_art/middle/work_middle_art10.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art11sepia.png", "images/works/work_art/middle/work_middle_art11.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art12sepia.png", "images/works/work_art/middle/work_middle_art12.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art13sepia.png", "images/works/work_art/middle/work_middle_art13.png");
      newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art14sepia.png", "images/works/work_art/middle/work_middle_art14.png");
  
  
          $(this).attr("src", newsrc);
  
      }, function() { 
          $(this).attr("src", oldsrc); 
  });
  });
  </code></pre>
  
  <p>This is for sure not the best code in the world but I am still learning. The current problem is that if I hover over an image it most of the time gets downloaded again by firefox. Even though I can see that all images were being downloaded by firefox previously. Sometimes the images are being loaded from the cache by firefox but it seems that after some amount of time the image is being downloaded again. I tested this also with opera und Chromium and it works well there. So why is Firefox downloading the image again and again and again? I want them to be cached! </p>
  
  <p>I'd appreciate any good advice.</p>
  
  <p>EDIT: It also works in IE. Could it possibly be that the problem is being caused because the preloaded images are not being added to the window.document.images array? In essence not in the DOM? My problem seems to be a bit if not fully related to this:</p>
  
  <p><a href="https://stackoverflow.com/questions/1893280/image-preloading-isnt-working-for-images-in-firefox?rq=1">Image preloading isn&#39;t working for images in FireFox</a></p>
  
  <p>But unfortunately no solutions were given.</p>