Question

Example: http://jsfiddle.net/forgetcolor/rZSCg/3/

Given a div set to overflow:auto, that will (likely) contain an image larger than its window, I’m trying to figure out a way to wait for that image to load before querying its properties. The property I’m after is it’s inner width, minus its scrollbar. Thanks to a previous stackoverflow question (http://stackoverflow.com/questions/10692598/how-to-get-innerwidth-of-an-element-in-jquery-without-scrollbar) I’ve got a technique to do it, but this only works with a small tiny image, or one in the cache. When it gets a large image, the code that does the query executes before the image is done loading.

What I want is a way to wait for that image to load before doing the query. Any ideas?

Full example: http://jsfiddle.net/forgetcolor/rZSCg/3/

Javascript:

// using a random appended to the URL to simulate non-cached
// varying images
var r = Math.floor((Math.random()*100000)+1);
$('#box1').html("<img src='http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?"+r+"' />");
var helperDiv = $('<div />');
$('#box1').append(helperDiv);
$('#iw').text("inner width is: " + helperDiv.width());
helperDiv.remove();

Answer 1

   var r = Math.floor((Math.random()*100000)+1);
   var newImage = new Image()
   $(newImage).load(function(){
        $('#iw').text("inner width is: " + newImage.width);
   });
   newImage.src = 'http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg?'+r

The problem you are encountering is abit more complex. Images from the DOM have odd loading behaviors, where onload events do not always fire. So placing the image into a div then waiting for the DOM element to fire onload, is not going to work.

As a result we need the built in javascript image object. (recently learned) that this object will solve both your problems. First as long as you set your .load listener before you set the image source, it will fire onload every time in every browser. After the load has occurred, because its an image object, you don’t need to add it to the page to get it’s height and width, those properties are built in.