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() {})被触发时，我试图执行动画，但没有运气。

当网页完全刷新并且每个标签内容首次加载时，最常出现此错误。

Answer 1

您可以调用animateHeight函数，因为加载的HTML中的每个图像都会被加载。 如果您有其他对象（如视频），则可以展开此选择。

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

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

Answer 2

图像load事件有点破碎。 要知道何时加载图像，您必须观察DOM的变化。 然后在每次更改时，您必须获取所有新图像并从回调中将onload事件添加到它们。 为了防止每次检查每个元素，一旦加载它们，您可以通过添加data-loaded="true"属性来标记它们。

---

监听DOM更改的一种方法是MutationObserver事件。 所有现代浏览器和IE11都支持此功能。

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

---

在每次DOM更改时，首先检查图像，而不检查已加载的data-loaded属性（通过检查element.complete这可能在图像仍在浏览器的缓存中时发生）。 如果是，则触发回调函数并将属性添加到其中。

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

在您的情况下，您只想在加载所有图像时触发回调，因此我添加了一个检查是否有没有data-loaded属性的静止图像。 如果删除if-clause，则在加载每个图像后将运行回调。

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

    }
}

DEMO： 加载所有图像的火灾事件