Javascript jQuery加载的html内容-检查是否加载和呈现了图像

我有标签逻辑，可以在包装器中加载html模板。这很好，但我包含了一个动画，当切换选项卡时，可以为选项卡包装的高度设置动画

问题如下：当模板包含

时，

$（“#选项卡内容”）.load（'template-url'，function（）{…}）

回调函数有时会在浏览器显示图像之前执行。我的动画无法正常工作

我试着设置一个小的超时，但每次都不起作用。如果我设置的超时时间超过300毫秒，就会感觉标签更改得太慢

我试图在启动

$（'img'）.load（function（）{}）

时执行动画，但没有成功

---

此错误最常发生在网页完全刷新且每个选项卡内容首次加载时。

当加载的HTML中的每个图像依次加载时，您可以调用

animatehight

函数。如果有其他对象（如视频），则可以展开此选择

// Call animateHeight as each image loads
var items = $('img', $contentHolder);
items.bind('load', function(){ 
    animateHeight();
});

---

更新的演示：

图像

load

事件有点中断。要知道何时加载图像，必须观察DOM中的更改。然后在每次更改时，您必须获取所有新图像，并从回调中将

onload

事件添加到它们。为了防止每次都检查每个元素，一旦它们被加载，您可以通过添加一个

dataload=“true”

属性来标记它们

---

侦听DOM更改的一种方法是MutationObserver事件。这一点得到了以下方面的支持

在以下答案中可以找到更好的受支持解决方案（IE9及以上）：。我不会在这里重复（但它包含在下面的演示中）

---

在每次DOM更改时，首先通过检查

元素来检查未加载
数据的图像，该属性已加载（当图像仍在浏览器缓存中时可能会发生这种情况）。完成
。如果是这样，则启动回调函数并向其添加属性

如果
.complete
不是这种情况，则向它们添加一个
onload
事件，该事件在加载回调后也会触发回调

// 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();

    }
}

在您的例子中，您只希望在加载所有图像时启动回调，因此我添加了一个检查，检查是否存在未加载
数据的静态图像。如果删除该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();

    }
}

演示：也许为了完整起见，还有一个jQuery插件做了类似的事情：谢谢你的回答，我将使用你的代码来解决我的问题。我接受了另一个答案，因为它与主题标题更相关，并提供了更多的解释。对于我的小项目，我需要一些简单的东西。