我有标签逻辑,可以在包装器中加载 html 模板。这很好用,但我包含了一个动画 height
选项卡切换时的选项卡包装。
问题如下:当模板包含 <img src="/some-image.png">
时$('#tab-content').load('template-url', function() {...})
回调函数有时会在浏览器显示图像之前执行。而且我的动画无法正常工作。
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() {})
时执行动画被解雇了,但没有运气。
此错误最常发生在网页完全刷新且每个选项卡内容首次加载时。
最佳答案
图像 load
事件有点损坏。要知道何时加载图像,您必须观察 DOM 的变化。然后在每次更改时,您必须获取所有新图像并从回调中向它们添加 onload
事件。为避免每次都检查每个元素,加载它们后,您可以通过添加 data-loaded="true"
属性来标记它们。
监听 DOM 变化的一种方法是 MutationObserver 事件。这由 all modern browsers and IE11 支持.
可以在此答案中找到更好的支持解决方案(IE9 及更高版本):Detect changes in the DOM .我不会在这里重复它(但它包含在下面的演示中)。
在每次 DOM 更改时,首先检查没有 data-loaded
属性的图像,这些图像无论如何都已加载(当图像仍在浏览器缓存中时可能会发生这种情况),方法是检查 元素.完成
。如果是,则触发回调函数并向其添加属性。
如果 .complete
不是这种情况,则向它们添加一个 onload
事件,该事件也会在加载后触发回调。
在你的情况下,你只想在加载所有图像时触发你的回调,所以我添加了一个检查是否还有没有 data-loaded
属性的图像。如果您删除该 if 子句,您的回调将在每个图像加载后运行。
// Observe the DOM for changes
observeDOM(document.body, function(){
checkNewImages();
});
var checkNewImages = function() {
var images = $('img:not([data-loaded]').each(function() {
addImageLoadedEvent( this );
});
}
var addImageLoadedEvent = function(img) {
if (img.complete) {
onImageLoaded(img);
} else {
$(img).on('load', function() {
onImageLoaded(this);
});
}
}
// The callback that is fired once an element is loaded
var onImagesLoaded = function(img) {
$(img).attr('data-loaded', 'true');
if($('img:not([data-loaded])').length === 0) {
// YourCallbackHere();
}
}
演示:fire event on all images loaded
关于javascript - jQuery 加载的 html 内容 - 检查图像是否已加载和呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30004152/