在動畫之前等待預先加載圖像加載

我有一個圖像，我預先設置爲一個div，div然後獲得動畫到一個新的高度，問題是，或者至少我認爲它是，頁面isn在抓取高度和動畫之前，不會等到圖片加載完成，我不知道如何讓它做到這一點。在動畫之前等待預先加載圖像加載

我已經設置好了，所以頁面等待文本完成加載，但我不知道如何也包含圖像部分。這是特別的
$（'＃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); 
}     
}

來源

2012-11-23 loriensleafs

您將需要使用load（）函數從jQuery來檢查，如果圖像加載。然後你便可以在前面加上要前置

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

來源

2012-11-23 18:45:53 toxicate20

亞克西一切，出於某種原因，那是因爲你使用的是「IMG」作爲標識符腳本添加圖片5倍 – loriensleafs

好。你可能不得不使用單獨的ID並通過'#yourID'與他們交談，以使其正確工作 – toxicate20

因此我試圖加載該圖像，然後將其加載到div「#images」中，然後在完成時加載動畫。我一直在通過將變量IMG的值改爲1來實現這一點。 – loriensleafs

在動畫之前等待預先加載圖像加載

回答

相關問題