Question

I have an image that I’m prepending to a div, the div then gets animated to a new height, the problem is, or at least I think it is, is that the page isn’t waiting until the image is loaded before grabbing the height and animating, and I’m not sure how to make it do that.

I have it set up right now so the page waits till the text is done loading but I’m not sure how to also include the image part. It’s this specifically
$(‘#images’).empty();

$("<img>", { src: 'http://www.klossal.com/' + id + ".png" }).prependTo("#images");

and here is the whole thing:

$(".thumb_container_img").click(function() {

a1=0; //Reset the Loading Variables
a2=0;
a3=0;
a4=0;
IMG=1;

var id = $(this).attr('id');


$('#images').empty();



$("<img>", { src: 'http://www.klossal.com/' + id + ".png" }).prependTo("#images");


$("#info_header").load(id +"_header.txt", function() {

console.log('Loaded'); //Testing Purposes Only
a1=1; // Loaded
animate_section(); // Attempt Animation         

});

$("#content_1").load(id +"_1.txt", function() {

console.log('Loaded'); //Testing Purposes Only
a2=1; // Loaded
animate_section(); // Attempt Animation         

});

$("#content_2").load(id +"_2.txt", function() {

console.log('Loaded'); //Testing Purposes Only
a3=1; // Loaded
animate_section(); // Attempt Animation         

});

$("#content_3").load(id +"_3.txt", function() {

console.log('Loaded'); //Testing Purposes Only
a4=1; // Loaded
animate_section(); // Attempt Animation         

});



});



function animate_section() {

if((a1===1) && (a2===1) && (a3===1) && (a4===1) && (IMG===1)){ //Animate if all thre divs are loaded

$("#top_section").animate({
    height: $("#load_container").outerHeight(true) + 30
}, 300);
$("#grid").animate({
    marginTop: $("#load_container").outerHeight(true) + 300,
    paddingBottom: 300
}, 300);   
}                
}

Answer 1

You will need to use the load() function from jQuery to check if the image was loaded. Afterwards you may then prepend everything you want to prepend

$('img').attr('src', 'image.jpg').load(function() { $(this).prependTo(...) })