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： 加載所有圖像的火災事件