How To Save Image Width And Height From Onload?

I have an array of

elements that I am trying to make into a carousel, just that I want the images to be resized if bigger than 640x480 as well as centered into the frame

Solution 1:

You can basically set an attribute of an image, something like data-loaded="true" once the image is loaded and when the last image is loaded you can then iterate the images and load the array

In your onload method, do the following changes

var img = new Image();
img.onload = function() {
    console.log(this.width + 'x' + this.height);

    //set this attribute to indicate that this image has been loaded already
    $(this).attr( "data-loaded", "true" );

    //check if all images have this attribute
    if ( $( "img[data-loaded='true']" ).size() == $( "img" ).size() ) 
    {
      //now iterate the images to load your array
    }
};
img.src = $(this).find('img').attr('src');