Show div after individual image loads

Question

Lets say I have this kind of set of images:

<div class="image"><img src="image1.jpg" alt="" />image1</div>
<div class="image"><img src="image2.jpg" alt="" />image2</div>
<div class="image"><img src="image3.jpg" alt="" />image3</div>

(note that the divs would be initially hidden)

What I want is that, after an individual <image> has loaded, .show(); the div.image surrounding it.

I would think this would be easy to do but I have searched all over the internet and so far they've been about doing something after all images have loaded instead of individual images.

Is this even possible to do?

Edit: It was later on changed so that there's also link around the image Working example: http://jsfiddle.net/peeter/qwtWZ/6/

Answer 1

<div class="image"><img src="http://acupuncture.celeboutfit.com/images/img/IMG_5400m-1.jpg" alt="" />image1</div>
<div class="image"><img src="image2.jpg" alt="" />image2</div>
<div class="image"><img src="image3.jpg" alt="" />image3</div>
<script type="text/javascript">
$(document).ready(function(){
    $("div.image").hide();
    $("div.image").find("img").load(function(){
        $(this).closest("div.image").show(500);
    });
});
</script>

Working example: http://jsfiddle.net/peeter/qwtWZ/6/

Answer 2

$(".image img").load(function()
{
    $(this).closest(".image").show();
});

Edit: Updated to allow for images that are descendants, but not necessarily children.