当 CSS 显示“无要阻止”时，对象标记将重新加载

object tag reloads when css display none to block

本文关键字：对象 新加载 加载 显示 CSS 无要阻止      更新时间：2023-09-26

我有一个html页面，其中包含一个包含svg对象的对象标签。 每次包含div 上的显示从无更改为块时，svg 对象都会重新加载。 这会导致为 svg 对象生成加载事件。 这发生在Chrome中，但不发生在Firefox中。

这是 Chrome 中的错误，还是正确的行为？ 我知道浏览器有时会延迟加载，直到元素可见，但我认为它们不应该在每次显示更改时重新加载。 我知道我可以使用 visibility=hidden 但这是一个大型遗留库的一部分，该库具有许多样式依赖项，因此更改起来并不容易。

下面是演示问题的最小代码片段（在 chrome 上）。 我在 Windows 39 上使用 chrome 7。

<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 时浏览器应该如何处理缓存资产。 这里的一位浏览器开发人员可能知道。

但是，您可以尝试以下替代方法：

  1. 将对象移出页面，例如。（位置：绝对;左：-9999px;}
  2. 折叠对象，例如。{宽度： 0; 高度： 0}
相关文章：