等效于使用 javascript 更改页面内容后的 readystatechange答案

【问题标题】：Equivalent of readystatechange after changing page content using javascript等效于使用 javascript 更改页面内容后的 readystatechange
【发布时间】：2019-12-16 19:18:52
【问题描述】：

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

我怎样才能做到这一点？

注意：出于性能原因，重新加载整个页面不是一个选项

我正在使用香草 JS：

containerElement.innerHTML = htmlString;

【问题讨论】：

请向我们展示您用于修改页面的代码。该方法在 React、Angular 等中有所不同，并且对于自定义编码的系统可能会非常不同。除非我们知道您用于加载所有内容的代码，否则我们无法告诉您如何确定何时加载所有内容。
我正在使用香草 javascript 并简单地替换 innerHTML
所以您正在使用 XMLHttpRequest 进行 AJAX 调用，当您收到响应时，该响应只是 HTML，您正在将 containerElement 的 innerHTML 设置为该响应而不进行任何修改或处理？跨度>
它在应用程序中。页面加载到 Web 视图中，应用程序调用 javascript 来更改容器 DIV 的 innerHTML
个人？我会使用 React 和 Webpack :D 它为延迟加载组件和资产提供支持，并有一个内置组件（称为“Suspense”）来处理检测这些延迟加载资产何时完成加载。如果您有兴趣，我建议您研究具有延迟加载和代码拆分的 React Hooks :) （哦，如果您确实研究了它，我还建议使用 hook-router 而不是 React Router 进行路由；我只是发现使用 React Hooks 时，它比 React Router 更简单、更优雅。）

标签： javascript readystate

【解决方案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% 的可加载元素被加载时，它会触发回调。

【讨论】：

谢谢！如何处理定义为内联 CSS 的背景图片？
你不能。内联样式元素不支持检查何时加载或加载其 URL 资源。