Question

I am loading an image and displaying once the image is finished and various css and animations are complete. But I want to call the image to check width and height within the the function:

$('.ePage').find('img').each(function(){
    var $img    = $(this);
    $('<img/>').load(function(){

         // my css and animations
         // need to check height and width


    }).attr('src',$img.attr('src'));
});

Only I dont want to load the image twice. How can I do this?

Answer 1

$('.ePage').find('img').each(function(){
    var $img    = $(this);
    $('<img/>').load(function(){

         console.log($(this).css("width"));
         console.log($(this).css("height"));
         console.log($(this).width());
         console.log($(this).height());

    }).attr('src',$img.attr('src'));
});

• http://api.jquery.com/css/
• http://api.jquery.com/width/
• http://api.jquery.com/height/