Dynamical Image loaded from php after javascript need to run

Question

I have page with image loading Dynamical from php.The image height is various px size(70,130,100,60).my need is how can get the image size currently viewed in page automatically in alertbox i try same code is not working.please help

code

<?php
foreach ($images as $image) { 
    ?>
<img src="<?php echo $image['url']; ?>" class="img_test" id="<?php echo $image['url']; ?>" width="70" style="max-height:70px" onclick="imagesize(this)" />
<?php
}?>

<script>
       $( window ).load(function() {

        $( ".img_test" ).each(function( index ) {
            alert('Height: '+$(this).height());
        });
       });
       function imagesize(obj){
           alert($(obj).height());
       }
</script>

if we click the image the height will display.in page load after automatically can't be display

Answer 1

It's important to understand that it's navigator (client) which load image and PHP is running into your server and send text to client.

Use a listener .on to get event 'click'.

Moreover, use $(document).ready and not .load to wait that images are loading

<?php foreach ($images as $image) { ?>
    <img src="<?php echo $image['url']; ?>" class="img_test" id="<?php echo $image['url']; ?>" width="70" style="max-height:70px" />
<?php } ?>


$(document).ready(function(){
    $( ".img_test" ).each(function(){
        alert('Height: '+$(this).height());
    });

    $(".img_test").on("click", function(){
           alert($(this).height());
    });
});

http://jsfiddle.net/3c9CN/