使用 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% 的可加载元素被加载时，它会触发回调。

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

Equivalent of readystatechange after changing page content using javascript

javascript

readystate