Question

I have a problem with geting the real width and height of some img tags which are added dynamically. Here is my code:

var imgcont = $("<img src='' /> ");
imgcont.css("display","none").appendTo("body");`

$("div#lightbox ul").on("click","li", function(){
                    var source = $(this).children("img").attr("src");
                    console.log(imgcont.attr("src",source).width());
                })`

If I click for the the first time I get the correct values for width and height but if I click a second time I get the values of the previous clicked element. In order to get the correct values I have to click again on the same element.

How can I get the correct values for img width and height on the first click?

Answer 1

$("div#lightbox ul").on("click", "li", function() {
    var source = $(this).children("img").attr("src");
    imgcont.attr("src", source).load(function() {  // after load finish
                                                   // get width

        console.log( this.width ); // according to @Alnitak comment
    });
})