Question

我有一个我正在外部加载的图像，我想多次附加到我的svg元素。

目前，如果我每次都调用mySnap.load(path)...，它会对图像发出AJAX请求。（请参阅jsFiddle示例here并观看网络标签。）浏览器可以缓存或不缓存，但我希望它不会发出请求。

我试图推出自己的缓存，但它不起作用：

let cache = {}
let load = function(path, callback) {
  if (cache[path]) {
    callback(cache[path])
  } else {
    Snap.load(path, (img) => {
      cache[path] = img
      callback(img)
    })
  }
}

参见示例here

问题是我第二次尝试使用返回的值时，它已被“清空”，可以这么说。我还有一个文档片段，但它没有内容。我假设这是因为它指向嵌入时由Snap库操纵的对象。

什么是更好的缓存返回对象的方法？ Fragment加载的.clone()功能与Element的功能不同。

Answer 1

我们可以简单地克隆它并在已经附加它后附加，或者你可以将它作为用法元素引用。

Snap.load(path, (img) => {
  var el = img.select("g")
  snap.append(el);
  moveIt(el) 
  for( var c=0; c<10; c++) snap.append( moveIt( el.clone() ) )
})

function moveIt( el ) {
  var x = -300 + Math.random() * 120;
  var y = -400 + Math.random() * 120;
  el.transform("t"+x+","+y+" s0.1,0.1");
  return el;
}

jsfiddle

Answer 2

虽然我可以在使用它时克隆返回的元素，并且第二次明确使用克隆，但我想要一个＆＃34;即插即用＆＃34;我不必考虑的解决方案：为Snap添加缓存，并且能够随时加载新图像而不必担心它们是否已经加载。

这是我最终使用的解决方案，一旦我找到了克隆返回的文档片段的方式，我可以再次使用它，就像我在常规加载时一样：

// drop-in replacement for Snap.load, with caching
cache = {}
load = function(path, callback) {
  if (cache[path]) {
    callback(Snap(cache[path].node.cloneNode(true)))
  } else {
    Snap.load(path, (img) => {
      cache[path] = Snap(img.node.cloneNode(true))
      callback(img)
    })
  }
}

在此处查看：http://jsfiddle.net/5p5wmdc3/

我敢打赌，有一种方法可以将其添加为实际的插件，但目前我很乐意在我的路径中调用MyLib.load我曾经打过的电话{ {1}}。

在Snap.svg中多次加载外部图像：如何缓存请求？

2 个答案: