我有一个 html 页面，其中包含一个包含 svg 对象的对象标记。每次包含 div 上的显示从无更改为 block 时，svg 对象都会重新加载。这会导致为 svg 对象生成加载事件。这种情况在 Chrome 中会发生，但在 Firefox 中不会。
这是 Chrome 中的错误，还是正确的行为？我知道浏览器有时会推迟加载，直到元素可见，但我认为它们不应该在每次显示更改时重新加载。我知道我可以使用visibility=hidden，但这是一个大型遗留库的一部分，该库具有许多样式依赖项，因此更改起来并不容易。
这是一个演示该问题的最小代码片段(在 Chrome 上)。我在 Windows 7 上使用 chrome 39。
<body>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
var toggle = 0;
$('#button').on('click', function () {
if (toggle % 2 == 0) {
$('#www').css('display', 'none');
} else {
$('#www').css('display', 'block');
}
toggle++;
});
});
</script>
<div id="www">
<object id="ggggg" name="ggggg" type="image/svg+xml" data="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg" width="583" height="471"> </object>
</div>
<input type="button" value="abcd" id="button"/>
</body>
最佳答案
我不确定这是否是一个错误。我不认为 CSS 定义了当显示设置为 none 时浏览器应该如何处理缓存的资源。这里的一位浏览器开发人员可能知道。
但是，您可以尝试其他选择:
- 将对象移出页面，例如。 (position:absolute；左:-9999px；}
- 折叠对象，例如。 {宽度:0；高度:0}
关于javascript - 当 css 显示无阻止时对象标记重新加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27230412/