Snap.svg - How To Load SVGs Synchronous?

Knowing that Snap.load(); is asynchronous, I'm looking for a way to append the loaded files in the requested order. This is the code I'm using: s = Snap(800, 800); function loadS

Solution 1:

You can sequence asynchronous tasks nicely with Javascript promises (polyfill for platforms that do not yet have native Promise), e.g.:

// Helper to convert Snap.load() into a Promise.
function loadSVG(url) {
  return new Promise(function(resolve, reject) {
    Snap.load(url, resolve);
  });
};

// Make an array of Promises.
var loadPromises = [
  loadSVG('http://example.com/a.svg'),
  loadSVG('http://example.com/b.svg'),
  loadSVG('http://example.com/c.svg'),
  ...
];

// Wait for all the Promises to finish.
Promise.all(loadPromises).then(function(results) {
  // results contains the loaded SVGs, in order.
  for (var i = 0; i < results.length; ++i) {
    var svg = results[i];

    // Your processing of each SVG goes here.
    var g = svg.select("g");
    s.append(g);
  }
});