0

I am attempting to manipulate image dimensions before rendering the images in the DOM. I am getting the image src paths from a data feed that contains these paths. The path point to different servers who host there product images. For example: src: http://pathstoclientserver.jpg.

I am attempting to construct the images as follows:

pandora.LayoutCtrl.prototype.constructImageElements = function() {
  var width = 0;
  var height = 0;

  for (var i = 0; i < this.imagesSrc.length; i++) {
    var image = new Image();
    image.src = this.imagesSrc[i];
    width = image.width;
    height = image.height;
    this.images.push(image);
  }
};

I was thinking that the image width would be available but since it comes back as zero, I am guessing the DOM must render the image before that property is available. Is that true? Also, if that is true, does anyone know of a way to get this images dimensions before rendering them in the DOM?

Aaron
  • 2,364
  • 2
  • 31
  • 56
  • 2
    The image has to be downloaded first and this is an asynchronous task. You need to wait for the `onload` event on `image`. – Sergiu Paraschiv Apr 25 '16 at 16:10
  • Thank you. I did read the other issue you linked to prior to posting. For sake of brevity I only read the question and the credited answer and I did not see anything that gave me the answer. From your response I realized that I was calling the above method after the wrong state within out state machine. I have it working now. Again thank you. – Aaron Apr 25 '16 at 16:27
  • The second answer there is the more relevant one. Always read the other answers :) – Sergiu Paraschiv Apr 25 '16 at 16:28

0 Answers0