Fire function after each image is loaded

Question

I am trying to fill a div with images and size the images to fit just right in their place. The problem is that when the image is not loaded, the dimensions x , y cannot be sampled from the element. This is what I am trying to do after looking up some examples on stack overflow. It does not work...

    $.each(data.data.children, function(i,item){
        // Some images come in with a busted link. Hence the IF statement...
        if (item.data.url.indexOf(".jpg")>0){
            var imgTitle = item.data.title;
            imgTitle = imgTitle;
            $('<div id="c'+i+'"></div>').attr("class", "imgDiv").appendTo("#photos");
            $("<img/>").attr("src", item.data.url).attr("id", "pic"+i).attr("class", "pics").appendTo("#c"+i);
                .load(function(){
                    $(this).fadein("slow");
                    if (iWidth>iHeight){
                        $('#pic'+i).width(270);
                        $('#pic'+i).height(parseInt(270-imgTitle.length/3));
                    }
                });

            $("<p>"+imgTitle+"</p>").attr("id", "p"+i).appendTo("#c"+i);  
            $("<img/>").attr("src", "images/RedX2.png").attr("class", "xit").appendTo("#c"+i);

            var mImg = $('#pic'+i)[0];
        }
    });

Alternatively, is there a way to do proportional fitting of an image inside the padding space proportionally?

TIA

DK

enter image description here

Can you get some HTML or example what you you want to achieve? — Lesha Ogonkov, Oct 08 '14 at 17:13
The images are all different sizes. They may be 1920x1080 or they can be 300x500... any shape imaginable... — DeKoss, Oct 08 '14 at 17:19
Vertical images do not need to be adjusted They drop in perfectly — DeKoss, Oct 08 '14 at 17:34
I think you looking for `margin-auto` http://jsbin.com/puwoyi/1/ — Lesha Ogonkov, Oct 08 '14 at 17:46
margin-auto is used for centering, I think ... max-height and max-width did it... — DeKoss, Oct 08 '14 at 18:18

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

You might not need any javascript at all. See this post for a way to use CSS to have the image automatically size to the div that contains it.

How do I auto-resize an image to fit a div container

edited May 23 '17 at 12:27

Community

1
1

answered Oct 08 '14 at 17:17

HeadCode

2,642
1
12
24

don't use max-height. – Zack Oct 08 '14 at 17:40
Actually using both max-height and max-width together and removing height property did it. – DeKoss Oct 08 '14 at 18:16
@HeadCode It did work. My mistake. I had height set to 70% and that was messing things up... Thank you, you gave me the best solution... – DeKoss Oct 08 '14 at 18:19

Fire function after each image is loaded

1 Answers1