Snap.svg - 如何同步加载 SVG?
Snap.svg - How to load SVGs synchronous?
知道 Snap.load();
是异步的,我正在寻找一种方法来按请求的顺序附加加载的文件。这是我正在使用的代码:
s = Snap(800, 800);
function loadSvg(url) {
Snap.load(url, appendSvg);
};
function appendSvg(svg) {
g = svg.select("g");
s.append(g);
};
loadSvg('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/b.svg');
loadSvg('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/a.svg');
我找到了这个 (http://svg.dabbles.info/snaptut-loadmulti.html),但我想知道是否有更简单的官方 Snap.svg 方法?我觉得 Snap.load();
应该有这个功能?
对于还没有原生 Promise 的平台,您可以使用 Javascript promises (polyfill 很好地对异步任务进行排序),例如:
// 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);
}
});
知道 Snap.load();
是异步的,我正在寻找一种方法来按请求的顺序附加加载的文件。这是我正在使用的代码:
s = Snap(800, 800);
function loadSvg(url) {
Snap.load(url, appendSvg);
};
function appendSvg(svg) {
g = svg.select("g");
s.append(g);
};
loadSvg('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/b.svg');
loadSvg('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/a.svg');
我找到了这个 (http://svg.dabbles.info/snaptut-loadmulti.html),但我想知道是否有更简单的官方 Snap.svg 方法?我觉得 Snap.load();
应该有这个功能?
对于还没有原生 Promise 的平台,您可以使用 Javascript promises (polyfill 很好地对异步任务进行排序),例如:
// 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);
}
});