Q:

jQuery, continue script only once after I have the width of one image

I need to know the width of some images to show it nice in a table of div's. The images have a classname. I do that like this:
var image_width = $('.image_product').width(); 

After that I calculate the other colums in the table by the result. In Firefox it works fine. But in Chrome the calculation script is already done before the image is loaded. The var image_width returns 0 pixels.
I tried to continue the script after the image is loaded through this:
$('.image_product').load(function() 
    {   
    calculate_column_width();
    });

That works great but I discovered the script will run twice when there are two images with that classname, three times if there are three images etc.
I can't find a simple solution to let the script continue only once. Who has an idea?

A:

Have you tried http://desandro.github.io/imagesloaded/ ?
With that plugin, the following code:
$('.image_product').imagesLoaded(function() {   
  calculate_column_width();
});

... would only fire the callback after all images within those matched containers are ready.

