【发布时间】：2012-11-24 02:41:29
【问题描述】：
我正在通过 jquery .load 动态加载一些 html 内容。我很难确保所有内容都已加载。文本的动态加载似乎工作正常，这是我遇到问题的 html 内容的加载。
这是页面，如果您单击左下角的蓝色盾牌，您会看到它没有动画到全高http://www.klossal.com/，但是如果您看这里，您可以看到它是如何加载的，它的工作原理它不是动态加载的http://www.klossal.com/index_backup.html
这是加载html的脚本部分
$('#images').load(id +".html", function() {
console.log('Loaded'); //Testing Purposes Only
IMG=1; // Loaded
animate_section(); // Attempt Animation
});
这是整个脚本：
var a1, a2, a3, a4, IMG;
$(".thumb_container_site").click(function() {
a1=0; //Reset the Loading Variables
a2=0;
a3=0;
a4=0;
IMG=0;
var id = $(this).attr('id');
$('#images').load(id +".html", function() {
console.log('Loaded'); //Testing Purposes Only
IMG=1; // Loaded
animate_section(); // Attempt Animation
});
$("#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);
}
}
还有第二个函数用于稍微不同的加载结构，但我认为这不会破坏任何东西。这个函数加载左上角的缩略图内容，加载完全正确，
$(".thumb_container_img").click(function() {
a1=0; //Reset the Loading Variables
a2=0;
a3=0;
a4=0;
IMG=0;
var id = $(this).attr('id');
$('#images').empty();
$("<img>", { src: 'http://www.klossal.com/' + id + ".png" }).load(function () {
$(this).prependTo("#images"), IMG=1 });
$("#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
});
});
【问题讨论】：
-
我想看看你的 animate_section() 函数