adding class for a dynamic image if the height is greater than the width, but only works when refreshing the page

Question

I have this code for when an image loads in our app and then when the height is greater than the width, add a class to bump up the margin. However unless you refresh the page, the function doesn't get executed. Any ideas & does this seem right? Thank you

window.onload = function() {
 getImageSize($('#productImage'), function(width, height){
 $('.product-info').console.log(width + ',' + height);
});

function getImageSize(img, callback) {
var $img = $(img);

var wait = setInterval(function() {
    var w = $img[0].naturalWidth,
        h = $img[0].naturalHeight;
    if (w && h) {
        clearInterval(wait);
        callback.apply(this, [w, h]);

    }
  if (h > w) {
   $("#productImage").addClass("image-margin"); 
  }
}, 30);

}
};

Answer 1

Looks like clearInterval(wait); is the one preventing your timer to run.