我有一套选项卡逻辑,可以在包装器内加载HTML模板。这很好用,但我加入了一个动画,当选项卡切换时会使选项卡包装器的
问题在于: 当模板包含
height
发生变化。问题在于: 当模板包含
<img src="/some-image.png">
时,$('#tab-content').load('template-url', function() {...})
回调函数有时会在浏览器显示图像之前执行。这导致我的动画不起作用。
代码示例(jsFiddle):
var currentHeight = $contentHolder.height();
$contentHolder.load(path, function() {
$contentHolder.stop();
function animateHeight() {
var loadedContentHeight = $contentHolder.css('height', 'auto').height();
$contentHolder.height(currentHeight);
$contentHolder.animate({
height: loadedContentHeight
}, 800, 'linear');
}
animateHeight();
});
我试图设置较短的超时时间,但并不总是有效。如果设置超过300毫秒的超时时间,感觉选项卡切换太慢。
我尝试在$('img').load(function() {})
被触发时执行动画,但没有成功。
该错误通常在完全刷新网页并且每个选项卡的内容首次加载时最常见。