Дождитесь загрузки SVG (Ajax) перед запуском функции - PullRequest
Новая
       28

Дождитесь загрузки SVG (Ajax) перед запуском функции

0 голосов
/ 04 сентября 2018

Я действительно искал несколько дней, но не смог найти решение:

У меня есть внешний 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

1 Ответ

0 голосов
/ 04 сентября 2018

Ближайшим к вашему вопросу ответом будет указание на то, что вместо использования XMLHttpRequest.onreadystatechange вы можете использовать обработчик событий .onload, который вызывается только после полной загрузки ресурса.

Но вы также можете упростить свой код, загрузив изображение в неэкранный режим <object>. Присоедините ваш обратный вызов к .onload, и с помощью .contentDocument вы можете получить доступ к DOM SVG. 

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';
...