title: Image preloading with javascript in iOS
body: <h2>Scenario</h2>
  
  <p>I use two images namely 'car-light.png' and 'car-dark.png'. When user touches the image, which was car-light.png, it becomes car-dark.png.</p>
  
  <p>Here is the code I used.</p>
  
  <pre><code>&lt;img src="car-light.png" id="car" ontouchstart="changeCar()"&gt;
  </code></pre>
  
  <p>In changeCar(), I wrote this code</p>
  
  <pre><code>$("#car").attr('src','url(car-dark.png)');
  </code></pre>
  
  <h2>Question</h2>
  
  <p>Is there a way to speed this up by preloading the image? Or am I making too big a deal with fast loading time? If it is the case where pre-loading is necessary, is the following code correct?</p>
  
  <pre><code>var img1 = new Image();
  img1.src = "car-dark.png";
  
  function changeCar(imgName) 
  {
      document[imgName] = img1;
  }
  </code></pre>
  
  <p>and in HTML</p>
  
  <pre><code>&lt;img src="car-light.png" name="car" ontouchstart="changeCar('car')"&gt;
  </code></pre>