title: load remote images via Javascript, then selectively add to array
body: <p>Using javascript I'm trying to load images not on the current page (from an array of image links) and if they are large enough, add them to an array. I'm executing this after the current page has loaded, though a bookmarklet, or firebug console. Using FF.</p>
  
  <p>The closest I've come is the below, but this does not seem to work, and I'm guessing this is because the size test is running before the images have loaded. Apparently my attempt to fix this with 'onload' does not work.  How can I fix this up, or is there a better/simpler way to accomplish this task?  </p>
  
  <pre><code>(function() {
  
      //create array for the images
      var imageArray = new Array();
  
  
      function loadIfBig(x){
              if (x.height &gt; 299 &amp;&amp; x.width &gt; 299 &amp;&amp; (x.height &gt; 399 || x.width &gt; 399)) {
                  imageArray.push(x);
                  //dispImage = '&lt;img src=' + x.src + '&gt;&lt;br&gt;';
                  //document.write('&lt;center&gt;' + dispImage + '&lt;/center&gt;');
              }
          return true;
      }
  
  
      //given an array of imageLinks:
      for (x in imageLinks){
      //create an image form link and add to array if big enough
          im = document.createElement('img');
          im.src = imageLinks[x];
          im.onload = loadIfBig(im);
      }
  
      //view results:
  
      for (x in imageArray){
          disp_image = '&lt;img src='+imageArray[x].src+'&gt;&lt;br&gt;';
          document.write('&lt;center&gt;'+disp_image+'&lt;/center&gt;');
      }
  
  
  })();
  </code></pre>
  
  <p>Update: </p>
  
  <p>Thanks! sure you're right and I'm missing something stupid here, but I made the change you suggested, and then pulled writing the elements into loadIfBig, but it doesn't seem to be executing that function.  current code below, including a couple sample input links: </p>
  
  <pre><code>(function() {
      var imageArray = new Array();
  
      var imageLinks = ['http://1.bp.blogspot.com/_mfMRTBDpgkM/SwCwu1RPphI/AAAAAAAAJpw/v9YInFBW84I/s1600/800px-San_Francisco_in_ruin_edit2.jpg','http://2.bp.blogspot.com/_mfMRTBDpgkM/SwCwulSZ_yI/AAAAAAAAJpo/NsRcJdpz4Dk/s1600/San_Francisco_PC_59.jpg']
  
      function loadIfBig(x){
              if (x.height &gt; 299 &amp;&amp; x.width &gt; 299 &amp;&amp; (x.height &gt; 399 || x.width &gt; 399)) {
                  imageArray.push(x);
                  dispImage = '&lt;img src=' + x.src + '&gt;&lt;br&gt;';
                  document.write('&lt;center&gt;' + dispImage + '&lt;/center&gt;');
              }
              return true;
      }
      processImages = function(){
          for (x in imageLinks) {
              //create an image from link and add to array if big enough
              im = document.createElement('img');
              im.src = imageLinks[x];
              im.onload = function(){
                  loadIfBig(this);
              }
          }
  
      }       
  })();
  </code></pre>