New Image or naturalwidth not working on chrome for IOS

I have a responsive website http://beakayani.com Where I use new Image() to inspect a list of images which I then use to find the natural width and height of each image. I then use these to indicate what css i should apply to the image.

Everything works perfectly except on Chrome for IOS which for some reason ignores this process. I know everything else works because if I input the heights manually everything works fine.

Does anyone know why this is and / or have a workaround that could work?

My code is:

// Get on screen image
var screenImage = $(this).children('img');

// Create new offscreen image to test
var theImage = new Image();

//get the url of the image 
theImage.src = screenImage.attr("src");

// on each image load get their width and height
var width, height;
    theImage.onload = function(){
        width = this.width;
        height = this.height;
    };

// Get accurate measurements from that.
var boxpicimagewidth = theImage.width;
var boxpicimageheight = theImage.height;