Question

我已经搜索了好几天，但找不到解决方法：

我有一个外部SVG（800k），需要在调用以下函数之前完全加载。有人用代码帮助我加载了SVG，但我想不出如何检测SVG何时完全加载。（我没有使用jQuery）。我需要功能initialSvgSettings()在SVG完全完成加载后才能运行。我现在有它，它只在SVG开始加载时运行，而不是在完成时运行。

这是我用来加载SVG的代码：

// LOAD SVG
var svgOverlay = viewer.svgOverlay();
var path = "images/elementosV6.svg";

function loadSVG(path, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(e) {
        try {
            if (xhr.readyState == 4 && xhr.status == 200) {
                callback(xhr.responseXML.documentElement);

                initialSvgSettings();
            }
        } catch (e) {
            console.log(e);
        }
    };

    xhr.open("GET", path, true);
    xhr.overrideMimeType("text/xml");
    xhr.responseType = "document";
    xhr.send();
}

loadSVG(path, function(data) {
    var g = data.getElementById("elements");
    svgOverlay.node().appendChild(g);
}); // FIN LOAD SVG

Answer 1

最接近您问题的答案是指出，可以使用.onload事件处理程序来代替使用XMLHttpRequest.onreadystatechange，该事件处理程序仅在资源完全加载后才调用。

但是您也可以通过将图像加载到屏幕外的<object>中来简化代码。将回调附加到.onload，然后使用.contentDocument可以访问SVG的DOM。

var svgContainer = document.createElement('object');
svgContainer.type = 'image/svg+xml';
svgContainer.onload = function () {
    var g = svgContainer.contentDocument.getElementById("elements");
    svgOverlay.node().appendChild(g);
}
svgContainer.data = 'images/elementosV6.svg';

在运行功能之前，请等待SVG加载（Ajax）

1 个答案: