Question

I’ve been trying to get image-loading dynamically- size dynamically to set wrapper div height and width via jQuery.

But the problem is alert($(".imageContainer").height() shows 0 since I believe the images has not been loaded when I call this function.

The process is : when user click a thumbnail on a grid, a modal window pops up and and some simple jQuery code set the src attribute on this modal window to show corresponding image.

Lets say :

$(".thumb-img").click(function(){
    $(".bigImage").attr("src","somewhere/"+$(this).attr("data-imageid")+".jpg");
    //needs to know whether image has been loaded or not
    $(".imageContainer").height($(".bigImage").height());
    $(".imageContainer").width($(".bigImage").width());
});

The images size are not consistent and I need to set size according to their size dynamically.

How can I do that?

Thanks in advance.

Answer 1

needs to know whether image has been
loaded or not

If you want to know whether or not image has loaded, you can use the load event (it works for images too):

$(".bigImage").load(function(){
  alert(' I am loaded...');
});

When you put your image-related code in load of the window through, all images and other resources are loaded by then, so you can safely assume all images are loaded:

$(window).load(function(){
  // by now all images are loaded
});