为什么 svg 加载仅在 Google Chrome 中延迟答案

【问题标题】：Why is svg loading delayed only in Google Chrome为什么 svg 加载仅在 Google Chrome 中延迟
【发布时间】：2020-03-19 11:23:50
【问题描述】：

我有一个 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>

【问题讨论】：

标签： javascript html google-chrome firefox svg

【解决方案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>

【讨论】：

谢谢，它成功了。顺便问一下，我以后会无法在 Firefox 中使用 display 属性吗？或者display 属性是否可以通过这种方式在 Chrome 中使用？
最好使用适用于所有浏览器的东西，然后尝试为每个浏览器定制不同的东西。关于 Chrome 的支持——这似乎是一种优化（不要加载不需要的元素），所以我真的不知道他们是否会改变。