即使隐藏时如何加载 HTML <object> SVG答案

【问题标题】：How to load HTML <object> SVG even when hidden即使隐藏时如何加载 HTML <object> SVG
【发布时间】：2012-08-05 04:23:06
【问题描述】：

我需要等待某个对象在隐藏时加载。但似乎正在发生的是，它只在没有display:none 的情况下加载；

我正在使用jQuery，我尝试将.load放在对象上以在加载时调用函数，但似乎它不会加载，因为它是隐藏的。

是否有“强制”加载对象的方法，或者有另一种“隐藏”但仍在加载的方法？

正确的做法：

使用visibility: hidden 而不是display: none

当‘display’属性设置为none时，给定元素不会成为渲染树的一部分。将“可见性”设置为隐藏，然而，处理就像元素是元素的一部分一样发生渲染树

【问题讨论】：

【解决方案1】：

从屏幕上加载它，style="position:absolute;left:100000px"

【讨论】：

【解决方案2】：

如何正确操作：

使用visibility: hidden 而不是display: none

当‘display’属性设置为none时，给定元素不会成为渲染树的一部分。将“可见性”设置为隐藏，然而，处理就像元素是元素的一部分一样发生渲染树

感谢@SomeKittens

【讨论】：

不幸的是，visibility:hidden 不足以在 Chrome 57 上隐藏 svg。即使宽度和高度设置为 0，仍然添加了一些空格。使用 display:none 效果很好。

【解决方案3】：

如果元素设置为display:none，则似乎是一个SVG will not be rendered。可以使用JS单独加载每个元素，如this answer.

【讨论】：