title: Preload images after page load with javascript & for loops
body: <p>I am currently working on creating a webpage photo gallery.  I have a ton of images I would like to preload with Javascript <em>after page load</em>. Rather than having a really, really long list of HTML links in my array, is it possible to utilize <code>for</code> loops? Please see my below code. Any helpful insights on what I'm doing wrong with the for loops would be very much appreciated! Thank you!!</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function preloader() {
          var images = new Array()
          function preload() {
              for (i = 0; i &lt; preload.arguments.length; i++) {
                  images[i] = new Image()
                  images[i].src = preload.arguments[i]
              }
          }
          preload(
              var i=1;
              "http://example.com/images/gallery/elephants-" + for (i=1;i&lt;=5;i++) {document.write(i);} + ".jpg",
              "http://example.com/images/gallery/penguins-" + for (i=1;i&lt;=2;i++) {document.write(i);} + ".png"
          )
      }
  
      function addLoadEvent(func) {
          var oldonload = window.onload;
          if (typeof window.onload != 'function') {
              window.onload = func;
          } else {
              window.onload = function() {
                  if (oldonload) {
                      oldonload();
                  }
                  func();
              }
          }
      }
      addLoadEvent(preloader);
  &lt;/script&gt;
  </code></pre>
  
  <p>The part I'm having a problem with is the <code>for</code> loops in the <code>preload()</code> section. The <code>preload()</code> section should output/do this:</p>
  
  <pre><code>preload(
      "http://example.com/images/gallery/elephants-1.jpg",
      "http://example.com/images/gallery/elephants-2.jpg",
      "http://example.com/images/gallery/elephants-3.jpg",
      "http://example.com/images/gallery/elephants-4.jpg",
      "http://example.com/images/gallery/elephants-5.jpg",
      "http://example.com/images/gallery/penguins-1.png",
      "http://example.com/images/gallery/penguins-2.png"
  )
  </code></pre>