jQuery加载HTML内容 - 检查图片是否已加载并呈现

Question

我有一套选项卡逻辑，可以在包装器内加载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() {})被触发时执行动画，但没有成功。

该错误通常在完全刷新网页并且每个选项卡的内容首次加载时最常见。

- Ifch0o1

---

也许是这个问题：https://dev59.com/REzSa4cB1Zd3GeqPqeNG - mplungjan

Answer 1

你可以在每个加载的HTML图像逐一加载时调用animateHeight函数。如果你有其他对象，如视频，可以扩展此选择。

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

更新的演示: http://jsfiddle.net/jxxrhvvz/1/

- Drakes

---

谢谢你的回答，我会使用你的代码来解决我的问题。我选择了另一个答案，因为它更相关于这个主题，并提供了更多的解释。对于我的小项目，我需要一些简单的东西。 - Ifch0o1

Answer 2

图片的load事件有些损坏。要知道何时加载图像，您需要观察DOM是否有更改。然后，在每次更改时，需要从回调中获取所有新图像并为它们添加onload事件。为了防止每次检查每个元素，一旦它们被加载，您可以通过添加例如data-loaded="true"属性来标记它们。

---

监听DOM变化的一种方法是使用MutationObserver事件。这在所有现代浏览器和IE11中都得到了支持。

一个更好的解决方案（IE9及以上版本）可以在这个答案中找到：检测DOM中的变化。我不会在这里重复它（但它包含在下面的演示中）。

---

每次DOM更改时，首先检查没有“data-loaded”属性但已经加载的图像（当图像仍在浏览器缓存中时可能会发生这种情况），方法是检查“element.complete”。如果是这样，请触发回调函数并添加该属性。

如果“。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();

    }
}

演示：在所有图片加载完成后触发事件

- Stephan Muller

---

为了完整起见，还有一个类似的jQuery插件：waitForImages。 - Stephan Muller