CODEWITHSUNDEEP
javascripthtmlcssimagedom
Coldark
Coldark

Reputation: 445

Getting image properties from Javascript Image() Element constructor

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.

Upvotes: 2

Views: 8081

Answers (3)

turbopipp
turbopipp

Reputation: 1255

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>

Upvotes: 0

Racil Hilan
Racil Hilan

Reputation: 25351

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>

Upvotes: 0

Rodrigo5244
Rodrigo5244

Reputation: 5525

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.

Upvotes: 3

Related Questions