javascript - 使用javascript更改页面内容后相当于readystatechange

Question

我正在使用 javascript 动态修改页面的一部分(仅加载一次)。我正在寻找相当于 readystatechange 事件，当部分页面更改后加载所有图像、字体等时，该事件将被触发。

我怎样才能实现这一目标？

注意:出于性能原因，不能重新加载整个页面

我正在使用普通 JS:

containerElement.innerHTML = htmlString;

Answer 1

如果您使用 vanilla JS 手动完成所有操作，您能做的最好的事情就是检测支持加载事件(图像、视频等)的子元素何时全部完成加载。它不是正在加载的 DIV 的完美表示，但也许它足够接近您的目的。

因此，在设置 DIV 的innerHTML 后，调用执行如下操作的函数:

function onDivLoaded(div, callback) {
    const loadable_types = ['img', 'video', 'frame', 'frameset', 'iframe', 'link', 'script'];
    const total = {};
    const loaded = {};

    function tryCallback(type) {
        ++loaded[type];
        const hasMore = loadable_types.some(type => loaded[type] < total[type]);
        if (!hasMore) { callback(div); }
    }

    loadable_types.forEach(type => {
        const els = div.getElementsByTagName(type);
        total[type] = els.length;
        loaded[type] = 0;
        els.forEach(element => {
            element.addEventListener('load', () => tryCallback(type));
            element.addEventListener('error', () => tryCallback(type));
        });
    });
}

所以基本上，在设置innerHTML之后，您将调用onDivLoaded并向其传递容器DIV和加载时运行的回调。然后，这会将加载和错误处理程序附加到支持这些事件的 DIv 内的每个 DOM 元素，并且每当一个元素触发时，它都会跟踪总共加载了多少个。当 100% 的可加载元素加载完毕时，它将触发回调。