为什么 svg 加载仅在谷歌浏览器中延迟

Question

我有一个 png、svg 文件，加载时已经隐藏了。我试图用JavaScript操作这个png和svg而不显示它。这适用于Firefox，但不适用于最新版本的Chrome。

问题

原因是Chrome在显示(display: block(object元素之前不会读取svg文件。这是Chrome中的错误吗？有没有办法解决这个问题并实现与 Firefox 相同的行为？

<img src="http://placehold.jp/150x150.png" style="display: none">
<object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml" style="display:none;"></object>

Answer 1

还有其他方法可以隐藏元素，例如可以将宽度，高度设置为0，将溢出设置为隐藏，或者使元素固定，并将其移动到顶部上方，等等...

例：

function showLoaded(idx) {
console.log('loaded ' + idx);
}

<img src="http://placehold.jp/150x150.png" style="display: none">
<object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml" onload="showLoaded(1)" style="display: none;"></object>
<object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml" onload="showLoaded(2)" style="position: fixed; top: -10000px;"></object>