Animation with image preloading
<p>I have a list of objects MyObject and that looks like this:</p>

<pre><code>var Obj1 = {'ImgTop':'500px','ImgLeft':'200px','ImgSrc':'/image1.jpg'}
var Obj2 = {'ImgTop':'300px','ImgLeft':'100px','ImgSrc':'/image2.jpg'}
</code></pre>

<p>I load these objects into an array like this:</p>

<pre><code>var AnimCycle = new Array(2);

AnimCycle[0] = Obj1;
AnimCycle[1] = Obj2;
</code></pre>

<p>In my code, there are actually 15 objects loaded in the array. I have function that gets called recursively and inside the function, I have this line:</p>

<pre><code>$('#HomeImg').attr('src', AnimCycle[PanelID].ImgSrc); 
</code></pre>

<p>The  problem is that the loading of the image happens when the line is triggered. How can I make the images preload?</p>

<p>Thanks for your suggestions.</p>
