javascript - Fire function after each image is loaded -

javascript - Fire function after each image is loaded -

i trying fill div images , size images fit right in place. problem when image not loaded, dimensions x , y cannot sampled element. trying after looking examples on stack overflow. not work...

$.each(data.data.children, function(i,item){ // images come in busted link. hence 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, there way proportional fitting of image within padding space proportionally?

tia

dk

you might not need javascript @ all. see post way utilize css have image automatically size div contains it.

image auto resize fit div container

javascript jquery html css image