Question

我尝试多次将单个SVG文件作为HTML Object标记加载，并且我使用JavaScript编写负责放置对象的HTML。但是，每次JavaScript写入页面时，Object都会加载一个单独的副本。

有没有办法加载一次，然后多次引用该副本？

这是我正在做的事情的一个例子（假设在加载div之后调用javascript。）：

＆＃13;

(function(){
  var foo = document.getElementById("foo");
  var numberOfElements = 10;
  for(var i = 0; i < numberOfElements; i++){
    foo.innerHTML +=
            "<object height=\"10px\" width=\"10px\" data=\"someSVG.svg\"></object>";
  }
}())

＆＃13;

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div id="foo">
    </div>
  </body>
</html>

＆＃13;

Answer 1

只需一次添加所有HTML代码即可。否则你告诉浏览器10次，DOM中有变化，它开始验证，引用并立即呈现它。希望这将使用'someSVG.svg'的浏览器文件缓存

(function() {
  var foo = document.getElementById("foo");
  var numberOfElements = 10;
  var content = ""; // temporary string, starting empty
  for (var i = 0; i < numberOfElements; i++) {
    content += 
      '<object height="10px" width="10px" data="http://www.webmasterpro.de/coding/article/svg.html/image/600px-SVG-Logo2.svg.png/scale/100x150/"></object>';
  }
  foo.innerHTML += content; // append once, outside of loop
}())

<div id="foo"></div>

Answer 2

似乎是因为元素而发生的。如果你切换到一个，也可以处理SVG。它就像一个魅力，并使用缓存的src。

你能吗？

   foo.innerHTML += '<img height="10px" width="10px" src="http://upload.wikimedia.org/wikipedia/en/2/24/WWF_logo.svg"/>'

请参阅此代码段：

(function() {
  var foo = document.getElementById("foo");
  var numberOfElements = 10;
  var content = ""; // temporary string, starting empty
  content +=
    '<img height="10px" width="10px" src="http://upload.wikimedia.org/wikipedia/en/2/24/WWF_logo.svg"/>';
  foo.innerHTML += content; // append once, outside of loop
  var element = document.querySelector('#foo img');
  for (var i = 0; i < numberOfElements; i++) {
    foo.appendChild(element.cloneNode(true));
  }
}())

<div id="foo"></div>

加载HTML对象一次并多次使用

2 个答案: