title: Javascript - Get info for multiple images from their URL, then insert them into DOM
body: <p>I need to get the height and width of an image from it's url and display that image differently based on the orientation of the image (portrait or landscape). I get the image through an API request.</p>
  
  <p>I'm currently using the following code, and the code I need help with begins with the line <code>var img = new Image;</code> inside the <code>attachments if statement</code> in the <code>case: 'link'</code> section of the <code>switch</code> statement.</p>
  
  <pre><code>FB.api('/', 'POST', {
    batch: [
      {
        method : 'GET',
        name : 'user',
        relative_url : '/me'
      },
      { 
        method: 'GET', 
        name : 'post-ids',
        relative_url: '/group-id/feed?fields=id',
        omit_response_on_success : false
      },
      { 
        method : 'GET',
        name : 'post-data',
        relative_url : '?ids={result=post-ids:$.data.*.id}&amp;fields=id,actions,application,from,to,message,message_tags,with_tags,picture,place,properties,source,status_type,link,description,caption,attachments,object_id,type,created_time,updated_time,likes.summary(1),comments.summary(1)',
        omit_response_on_success : false
      },
      {
        method : 'GET',
        name : 'post-likes',
        relative_url : '?ids={result=post-ids:$.data.*.id}/likes?limit=5000',
        omit_response_on_success : false
      },
      {
        method : 'GET',
        name : 'post-comments',
        relative_url : '?ids={result=post-ids:$.data.*.id}/comments?fields=id,actions,application,from,to,message,message_tags,with_tags,picture,place,properties,source,status_type,link,description,caption,attachments,object_id,type,created_time,updated_time,likes.summary(1)&amp;limit=5000',
        omit_response_on_success : false
      }
    ]
  }, function (response) {
  
    var membody = JSON.parse(response[0].body);
    console.log('Successful login for: ' + membody.name);
  
    var posts = JSON.parse(response[1].body);
    //console.log(posts);
    //console.log(posts.data[0].id);
    var feed = JSON.parse(response[2].body);
  
    for(var x = 0; x &lt; posts.data.length; x++) {
      //console.log(posts.data[x].id);
      var post = feed[posts.data[x].id];
      console.log(post);
  
      var entry = '&lt;div class="post"&gt;';
  
      var from_id = post.from.id, 
          from_name = post.from.name,
          post_id = post.id,
          type = post.type,
          created_time = post.created_time; 
  
      entry += '&lt;div class="post-title"&gt;&lt;a href="http://www.facebook.com/' + from_id + '"&gt;' + from_name + '&lt;/a&gt; posted a ' + type + ' - &lt;time&gt;' + relativeTime(created_time);
  
      if(post.application) {
        var app_id = post.application.id,
            app_name = post.application.name,
            app_namespace = post.application.namespace;
        entry += ' via ' + app_name + '&lt;/time&gt;&lt;/div&gt;';
      } else { entry += '&lt;/time&gt;&lt;/div&gt;'; }
  
  
      switch(post.type) {
  
        case 'status' :
  
          if(post.actions) {
          }
  
          if(post.message) {
            var message = nl2br(post.message);
  
            if(post.message_tags) {
              var message_tags = post.message_tags;
  
              for (var tag in message_tags) {
  
                if (message_tags.hasOwnProperty(tag)) {
                  var message_tag_id = message_tags[tag][0].id;
                      message_tag_length = message_tags[tag][0].length;
                      message_tag_name = message_tags[tag][0].name;
                      message_tag_offset = message_tags[tag][0].offset;
                      message_tag_type = message_tags[tag][0].type;
  
                  var link = '&lt;a href="http://www.facebook.com/' + message_tag_id + '"&gt;' + message_tag_name + '&lt;/a&gt;';
                  message = message.replace(message_tag_name, link);
                }
  
              } 
  
            } 
  
            entry += '&lt;div class="post-message" style="margin:8px 0;"&gt;' + message + '&lt;/div&gt;';
          }
  
          if(post.attachments) {
            var att = post.attachments.data[0];
            if(att.description) var att_description = att.description;
            if(att.type) var att_type = att.type;
            if(att.title) var att_title = att.title;
            switch(att.type) {
              case 'unavailable' :
                entry += '&lt;div class="status-att" style="border: 1px solid #ccc; padding: 8px;"&gt;&lt;div class="status-att-title" style="font-weight: bold;"&gt;' + att_title + '&lt;/div&gt;&lt;div class="status-att-desc"&gt;' + att_description + '&lt;/div&gt;&lt;/div&gt;';
              break;
            }
          }                 
  
          if(post.to) {
            var to_id = post.to.data[0].id,
                to_name = post.to.data[0].name;
          }
  
          if(post.updated_time) var updated_time = post.updated_time;
  
          if(post.likes) {
          }
  
          if(post.comments) {
          }
  
        break;
  
        case 'link' :
  
          console.log(JSON.stringify(post));
  
  
  
          if(post.attachments) {
            var att = post.attachments.data[0];
            if(att.type) var att_type = att.type + 'd';
            else var att_type = 'posted';
          }
  
          entry += '&lt;div class="post-title"&gt;&lt;a href="http://www.facebook.com/' + from_id + '"&gt;' + from_name + '&lt;/a&gt; ' + ((att.type) ? 'shared' : 'posted') + ' a ' + type + ' - &lt;time&gt;' + relativeTime(created_time);
  
          if(post.application) {
            var app_id = post.application.id,
                app_name = post.application.name,
                app_namespace = post.application.namespace;
            entry += ' via ' + app_name + '&lt;/time&gt;&lt;/div&gt;';
          } else { entry += '&lt;/time&gt;&lt;/div&gt;'; }
  
          if(post.message) {
            var message = nl2br(post.message);
  
            if(post.message_tags) {
              var message_tags = post.message_tags;
  
              for (var tag in message_tags) {
  
                if (message_tags.hasOwnProperty(tag)) {
                  var message_tag_id = message_tags[tag][0].id;
                      message_tag_name = message_tags[tag][0].name;
  
                  var link = '&lt;a href="http://www.facebook.com/' + message_tag_id + '"&gt;' + message_tag_name + '&lt;/a&gt;';
                  message = message.replace(message_tag_name, link);
                }
  
              } 
  
            } 
  
            entry += '&lt;div class="post-message" style="margin:8px 0;"&gt;' + message + '&lt;/div&gt;';
          }
  
          if(post.attachments) {
            var att = post.attachments.data[0];
            if(att.subattachments) {
              $(att.subattachments.data).each(function (i, item) {
                var sub_img_height = item.media.image.height,
                    sub_img_width = item.media.image.width,
                    sub_img_src = item.media.image.src,
                    sub_target = item.target.url,
                    sub_type = item.type;
  
                entry += '&lt;img src="' + sub_img_src + '"/&gt;&lt;br/&gt;---&lt;br/&gt;' + target + '&lt;br/&gt;---&lt;br/&gt;' + title + '&lt;br/&gt;---&lt;br/&gt;';
  
              });
            } else {
              var target = att.target.url,
                  title = att.title;
              entry += '&lt;a class="link" href="' + (post.link ? post.link : target) + '" style="color: #000; text-decoration: none;"&gt;';
              if(post.picture) {
                // there's a photo
                if(post.picture.indexOf('imdb') &gt; -1) {
                  entry += '&lt;div style="float: left; width: 158px;"&gt;&lt;img src="' +  post.picture + '" style="width: 158px;"/&gt;&lt;/div&gt;';
  
                  entry += '&lt;div style="float: left; width: 400px; padding: 8px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;"&gt;&lt;div class="link-title" style="padding-bottom: 8px; font-weight: bold;"&gt;' + title + '&lt;/div&gt;';
                  if (post.description) entry += '&lt;div class="link-desc" style="padding-bottom: 8px;"&gt;' + post.description +  '&lt;/div&gt;';
                  if (post.caption) entry += '&lt;div class="link-caption" style="font-size: 14px; text-transform: uppercase; color: #888;"&gt;' + post.caption + '&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;';
                  entry += '&lt;div class="clear"&gt;&lt;/div&gt;';
                } else {
                    var picture = post.picture.split('url=');
                    var img = new Image();
                    img.onload = function(){
                      var height = img.height,
                          width = img.width;
  
                      console.log(decodeURIComponent(decodeURI(picture[1])));
                      console.log('Width: ' + width);
                      console.log('Height: ' + height);
  
                      if(width &gt; height) {
                        // wide photo, above details
                        entry += '&lt;img src="' + decodeURIComponent(decodeURI(picture[1])) + '" style="max-width:576px; margin-bottom: 0;" /&gt;';
  
                        entry += '&lt;div class="link-details" style="padding: 0 8px 8px 8px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;"&gt;&lt;div class="link-title" style="padding-bottom: 8px; font-weight: bold;"&gt;' + title + '&lt;/div&gt;';
                        if (post.description) entry += '&lt;div class="link-desc" style="padding-bottom: 8px;"&gt;' + post.description +  '&lt;/div&gt;';
                        if (post.caption) entry += '&lt;div class="link-caption" style="font-size: 14px; text-transform: uppercase; color: #888;"&gt;' + post.caption + '&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;';
                        entry += '&lt;div class="clear"&gt;&lt;/div&gt;';
                      } else {
                        // tall photo, left of details
                        entry += '&lt;div style="float: left; width: 158px;"&gt;&lt;img src="' +  decodeURIComponent(decodeURI(picture[1])) + '" style="max-width: 158px;"/&gt;&lt;/div&gt;';
  
                        entry += '&lt;div style="float: left; width: 400px; padding: 8px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;"&gt;&lt;div class="link-title" style="padding-bottom: 8px; font-weight: bold;"&gt;' + title + '&lt;/div&gt;';
                        if (post.description) entry += '&lt;div class="link-desc" style="padding-bottom: 8px;"&gt;' + post.description +  '&lt;/div&gt;';
                        if (post.caption) entry += '&lt;div class="link-caption" style="font-size: 14px; text-transform: uppercase; color: #888;"&gt;' + post.caption + '&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;';
                        entry += '&lt;div class="clear"&gt;&lt;/div&gt;';
                      }
                    }
  
                    img.src = decodeURIComponent(decodeURI(picture[1]));
                }
  
              } else {
                // no picture
                entry += '&lt;div class="link-details" style="width: 558px; padding: 8px; border: 1px solid #ccc;"&gt;&lt;div class="link-title" style="padding-bottom: 8px;"&gt;' + title + '&lt;/div&gt;';
                if (post.description) entry += '&lt;div class="link-desc" style="padding-bottom: 8px;"&gt;' + post.description +  '&lt;/div&gt;';
                if (post.caption) entry += '&lt;div class="link-caption" style="padding-bottom: 8px;"&gt;' + post.caption + '&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;';
              }
            }
          } 
  
        break;
        case 'photo' :
          if(post.message) {
            var message = nl2br(post.message);
  
            if(post.message_tags) {
              var message_tags = post.message_tags;
  
              for (var tag in message_tags) {
  
                if (message_tags.hasOwnProperty(tag)) {
                  var message_tag_id = message_tags[tag][0].id;
                      message_tag_name = message_tags[tag][0].name;
  
                  var link = '&lt;a href="http://www.facebook.com/' + message_tag_id + '"&gt;' + message_tag_name + '&lt;/a&gt;';
                  message = message.replace(message_tag_name, link);
                }
  
              } 
  
            } 
  
            entry += '&lt;div class="post-message" style="margin:8px 0;"&gt;' + message + '&lt;/div&gt;';
          }
  
          if(post.attachments) {
  
            var att = post.attachments.data[0];
  
            if(att.subattachments) {
              var sub = att.subattachments;
  
            } else {
  
              switch(att.type) {
                case 'photo' :
                  entry += '&lt;a href="' + att.target.url + '" target="_blank"&gt;&lt;img class="post-photo" style="max-height: 576px; max-width: 576px; margin: 8px 0;" src="' + att.media.image.src + '"/&gt;&lt;/a&gt;';
  
                break;
                case 'unavailable' : 
                  var att = post.attachments.data[0];
                  entry += '&lt;div class="status-att" style="border: 1px solid #ccc; padding: 8px;"&gt;&lt;div class="status-att-title" style="font-weight: bold;"&gt;' + att.title + '&lt;/div&gt;&lt;div class="status-att-desc"&gt;' + att.description + '&lt;/div&gt;&lt;/div&gt;';
                break;
              }
  
            }
  
          }
  
        break;
        case 'video' :
        break;
      }
  
      $('#feed').append(entry);
  
    }
  
  });
  </code></pre>
  
  <p>There may be one image or many, but each one is part of a larger object in the API results so these images are not handled together. </p>
  
  <p>The problem I'm having is that the images are not displaying at all, and when I log them to the console, only the information for one image is logged: If there are 4 images total, for example, the first image is logged 4 times.</p>
  
  <p>How can I work all this out? I need to be able to display differently oriented images in different ways!</p>