MutationObserver 仅在所有资源加载完毕后回调

评论中提出了一个解决方案来检测背景图像加载。虽然确切的实现并不适合，因为我没有使用 jQuery，但该方法的可转移性足以与MutationObserver.

在MutationObserver必须检测和更改元素及其所有子。必须调查每一个改变的孩子。如果孩子是一个图像，那么load事件侦听器附加到它，跟踪我附加的总数。如果孩子不是图像，则检查它是否有背景图像。如果是这样，则会创建一个新图像，load如上附加一个事件侦听器，并将src图像的 设置为孩子的backgroundImageurl。浏览器缓存意味着一旦新图像加载完毕，背景图像也会加载。

一旦load触发的事件数等于附加的事件总数，我就知道所有图像都已加载。

var page = document.getElementById( "page" ),
    total = 0,
    counter = 0;

var callback = function( mutationsList, observer ){
    for( var mutation of mutationsList ) {
        if ( mutation.type == 'childList' ) {
            Array.prototype.forEach.call( mutation.target.children, function ( child ) {
                var style = child.currentStyle || window.getComputedStyle(child, false);

                if ( child.tagName === "IMG" ) {
                    total++; // keep track of total load events
                    child.addEventListener( 'load', loaded, false );

                } else if ( style.backgroundImage != "none" ) {
                    total++; // keep track of total load events
                    var img = new Image();
                    img.addEventListener( 'load', loaded, false );
                    // extract background image url and add as img src
                    img.src = style.backgroundImage.slice(4, -1).replace(/"/g, "");
                }
            } );
        }
    }
    function loaded() {
        counter++; // keep track of how many events have fired
        if ( counter >= total ) {
            page.style.opacity = "1";
        }
    }
}

var observer = new MutationObserver( callback );
var config = { characterData: true,
            attributes: false,
            childList: true,
            subtree: true };

observer.observe( page, config );
page.innerHTML = newContent; // update content

这个解决方案似乎有点黑客。需要为每种类型的资源实施一个新案例。例如，如果我还需要等到脚本加载完毕，我就必须识别脚本并将load事件侦听器附加到它们，或者如果我不得不等待字体加载，则必须为它们编写一个案例。

如果有一个本机函数来确定所有资源何时加载，而不是将事件侦听器附加到所有内容，那就太好了。Service Workers 看起来很有趣，但就目前而言，我认为 hackish 解决方案是最简单和最可靠的。