0

我正在通过 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         

});



});
4

1 回答 1

0

在我看来,正在发生的事情是加载文本文件时触发了加载回调,而不是加载图像本身时。因此,您对 outerHeight() 的调用得到了不正确的值,因为容器元素的高度等于当时图像的加载部分。你应该调查把一个

$('#load_container img').on('load', function(){
   //callback or emit an event that will listen and then respond with your callback
});
于 2012-11-24T02:53:37.127 回答