title: preload images before render javascript
body: <p>I wanna display images instantly as all the images are loaded for my smooth slider,
  but its not working.</p>
  
  <pre><code>var myPhotos = {
      _counter: 0,
      images: [],
      init: function() {
          ServerCall1(0, 'xml', 'rssphotos.php', function(xml) {
              imageObj = new Image();
              $(xml).find('item').each(function() {
                  var desc = $(this).find('description').text();
                  var resp = getImgArray(desc);
  
                  myPhotos.images[myPhotos._counter] = resp[0];
                  myPhotos._counter++;
  
              });
  
              //start preloading
              for (i = 0; i &lt; myPhotos._counter; i++) {
                  imageObj.src = myPhotos.images[i];
              }
  
              ////PUT THE HEADER HOME PAGE
              topHeader.putData(topHeader.photoData());
          });
      }
  
  };
  </code></pre>
  
  <p>After the execution of this function, I loop through <code>myPhotos.images</code> to get them instantly, but its rendering one by one very slowly.</p>