Question

I have a block of php code that loads an image at random. I’m trying to determine when the image has loaded so I can perform some additional actions on it. Here is how I’m currently loading my image:

// Gets my image
$sql = "SELECT id FROM images WHERE user_id=$owner_user_id LIMIT 0,1";
$imgres = mysql_query($sql);
if ($imgres) {
    $imgrow = mysql_fetch_array($imgres, MYSQL_ASSOC);
    if (!empty($imgrow)) {
        echo ('<image src="img.php?id=' . $imgrow['id'] . '" id="profile_img" style="visibility:hidden"/>');
    }
}

One of the actions I need to do is get the width of the image. I’m getting the image like so:

alert("IMAGE WIDTH:"+$('#profile_img').width());

It currently returns 0 because it’s being called prior to the image being loaded. I’ve tried adding this method call to my document.ready block but it still gets called prior to the image being loaded. Is there an easy way to determine when the image has loaded?

Answer 1

$("#profile_img").load(function(){
   alert(("IMAGE WIDTH:"+$('#profile_img').width())
});

http://api.jquery.com/load-event/