javascript - 将多个 SVG 加载到 JavaScript 数组中，无需 DOM 附加

Question

我想执行以下操作:

function loadSvg(path) {
  d3.xml(path, 'image/svg+xml', function(xml) {
    return xml.documentElement;
  });
}

d3.json(jsonOfSvgFileNames, function(paths) {
  // paths = ['pathName','pathName2',...]
  var svgList = [];

  for(var p in paths) {
    var path = paths[p],
        svg = loadSvg(path);
    svgList.push(svg);
  }
});

我遇到了 d3.xml 调用完成后 xml.document 对象消失的问题。我知道这个永久性问题对于其他类型的服务器调用来说可能是一个问题，但我不确定需要使用哪些关键字来找到答案。

虽然一个答案是按需发出服务器请求，然后在 d3.xml 调用中将 SVG 附加到 DOM，但这不适用于我的应用程序。时间在我的应用程序中很重要，即使 300 毫秒的等待也太多了，这就是为什么我更喜欢进行批量加载。

Ninja-edit:我发现这是因为异步调用，并且对象在加载之前被插入数组。 promise 是否是一个可接受的解决方案(例如，load().then(push))？我没有太多地使用 promise 。是否有一个公认的 promise 标准库？

Answer 1

promise 确实是可行的方法:

var svgs = [];

$.when( loadData('gridList.json') ).then(function(status){
  console.log( status )
  for (var i = 0; i < svgs.length; i ++){
    $("body").append(svgs[i]);
  }
})


function loadSVG(path){
  var dfd = new jQuery.Deferred();
  d3.xml(path, 'image/svg+xml', function(xml) {
    svgs.push( xml.documentElement );
    dfd.resolve("loaded " + path);
  });
  return dfd.promise();
}


function loadData(jsonFile){
  var dfd = new jQuery.Deferred();
  d3.json(jsonFile, function(paths) {
      for( var i = 0; i < paths.length; i++ )
      $.when( loadSVG(paths[i]) ).then( function(status){
        console.log( status );
        if (svgs.length == paths.length)
          dfd.resolve( "All SVGs loaded!" )
      });
  });
  return dfd.promise();
}