在制作动画之前等待预置图像加载

Question

我有一个图像，我正在为div预置，然后div被动画化到一个新的高度，问题是，或者至少我认为是，页面没有等到图像加载后才抓取高度和动画，我不确定如何做到这一点。

我现在已设置它，因此页面会等到文本加载完成，但我不确定如何也包含图像部分。 是这个
$（'#images'）.empty（）;

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

这是整个事情：

$(".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

你需要使用 jQuery 中的 load（） 函数来检查图像是否已加载。之后，您可以预置要预置的所有内容

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