Getting image properties from Javascript Image() Element constructor

Question

I'm using new Image(), to preload images like so:

function preload() {
  var imgs = [];
  for (i = 0; i < arguments.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = arguments[i];
  }
return imgs;
}

//function being called like so
var paths = ["../images/image01.jpg","../images/image02.jpg", ...];
var images = preload.apply(null, paths);

This returns an array of img objects... with all of the properties emptied when displayed with the console.log()

My question is - how can I get width and height of every preloaded image?

Or even more - is it possible in some mysterious way to get those dimensions earlier (some sort of pre-reading-pre-loaded-pre-image), so I could just create those preloaded images particular size?

I'm sorry if I don't understand something obvious on "how these things works", it happens to me quite often.

JUST FOR CLARIFICATION

As @Waterscroll pointed out, loading images takes time, so getting image properties has to be done when .onload event occurs. Later on, images can be handled by some callback function.

Feel free to take a look at the other answers as they show more practical approach to the topic.

If I may add something - it may be beneficial in some cases to store image dimensions i.e. in a database. In this particular script I'm getting file paths from a database, so I could do just that with the size of an image too.

@PedroLobito arguments doesn't need to be declared. It is merely "an array-like object corresponding to the arguments passed to the function." - MDN — Vince
– Vince, Commented Oct 30, 2015 at 21:17
@PedroLobito because OP doesn't have code that calls the function. — Vince
– Vince, Commented Oct 30, 2015 at 21:19

Rodrigo5244 · Accepted Answer · 2015-10-30 21:30:21Z

3

After you set the src property it takes a while for the image to load. In some browsers, you can use the load event to know when the image has been loaded, in browsers that don't support that event you can use the complete property to check if the image has been loaded. Once the image has been loaded you should be able to get the height and width of the image via the naturalHeight and naturalWidth properties.

The only way to get the height and width of the images without loading them is by saving that information in a place that you can reach with your script or inside your script.

answered Oct 30, 2015 at 21:30

Rodrigo5244

5,5852 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Coldark Over a year ago

I think, that will be the case. I'll accept your answer as soon as I'm done with some testing. Thank you.

Racil Hilan · Accepted Answer · 2015-10-30 22:52:48Z

To answer your question How can I make sure all of them are loaded?, you will need to track the loading of all images in the array. Make sure you set the onload event before the src property like I did. I passed the collection to the AllImagesLoadedCallback() function only for testing so I can print out the dimensions, but you don't need to pass anything or pass whtever parameters and do whatever you like inside this function.

<div id="test"></div>
<script>
  function preload() {
    var imgs = [];
    var count = arguments.length;
    var loaded = 0;
    for (i = 0; i < arguments.length; i++) {
      imgs[i] = new Image();
      //Make sure you set "onload" before "src".
      imgs[i].onload = function() {
        loaded++;
        if(loaded == count)
          AllImagesLoadedCallback(imgs);
      }
      imgs[i].src = arguments[i];
    }
  return imgs;
  }

  //This function is called when all images have been laoded. 
  function AllImagesLoadedCallback(images){
    document.getElementById("test").innerHTML = "All images have been loaded. The dimensions are:<br/>";
    
    for(var i = 0; i < images.length; i++){
        document.getElementById("test").innerHTML += "Image: " + i + ": " + images[i].width + "x" + images[i].height + "<br/>";
    }
  }

  //This is just a test to call preload().
  var m = preload("http://placehold.it/400x40","http://placehold.it/500x50","http://placehold.it/200x20");
  //alert(m.length);
</script>

Well, every answer on this topic is somewhat good. Definitely +1 for the callback function.

turbopipp · Accepted Answer · 2015-10-31 00:15:49Z

0

This might help you out. If you do not wait until it is loaded, the width or height will not be available.

var url = 'http://placehold.it/';
var paths = ["400x40","500x50","600x60","700x70","800x80"];
var images = preload.apply(null,paths); //preload images

//listen for onload on each element, and print w/h when ready
images.forEach(function(entry) {
    entry.onload=function(){
      document.getElementById('output').innerHTML += this.width+'x'+this.height+'<br />';
    };
});

//preload function
function preload() {
  var imgs = [];
  for (i = 0; i < arguments.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = url+arguments[i];
  }
  return imgs;
}

<div id="output"></div>

edited Oct 31, 2015 at 0:15

answered Oct 30, 2015 at 21:11

turbopipp

1,2552 gold badges15 silver badges27 bronze badges

1 Comment

turbopipp Over a year ago

Sorry about that, mistakenly used jQuery code for the listener at first, corrected it to javascript now. :) You are welcome to upvote me now instead. ;)

Collectives™ on Stack Overflow

Getting image properties from Javascript Image() Element constructor

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related