title: How to preload images using jquery for carousel?
body: <p>I used jquery stepcarousel plugin and it works fine... But how to preload images that is used by the plugin... I am using this,</p>
  
  <pre><code>&lt;div id="mygallery" class="stepcarousel"&gt;
        &lt;div class="belt"&gt;
            &lt;div class="panel"&gt;
              &lt;img src="Images/img1.jpg" /&gt;
            &lt;/div&gt;
            &lt;div class="panel"&gt;
              &lt;img src="Images/img2.jpg" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  
      stepcarousel.setup({
          galleryid: 'mygallery', //id of carousel DIV
          beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
          panelclass: 'panel', //class of panel DIVs each holding content
          autostep: { enable: true, moveby: 1, pause: 3000 },
          panelbehavior: { speed: 500, wraparound: false, persist: true },
          defaultbuttons: { enable: true, moveby: 1, leftnav: ['Images/lft_arrow.jpg', -5, 220], rightnav: ['Images/rit_arrow.jpg', -5, 220] },
          statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
          contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
      })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>How to preload images used by <code>mygallery</code> div such that i can avoid flickering.....</p>