jquery - 在重新加载链接样式表时强制重新计算 $(...).css ("background-image")

Question

(我只需要 Chrome 中的功能)

上下文:
我正在编写一个 node.js 脚本，该脚本自动监视它所服务的文件的更改，然后使用 websocket 连接将消息推送到浏览器中管理 Assets 重新加载的控制页面。例如，如果一个 html 页面有一个 <img href="foo.jpg" /> ，服务器将查看 jpg 并向页面发送消息“foo.jpg”已更改。此时我使用 javascript 重新加载图像(src = src+"?cachbust=00002"，或类似的)。

问题:
当背景图像发生变化时，我循环遍历页面元素以查找对图像的任何引用并使用新的查询字符串重置它以重新加载它。为此，我使用 jquery 的 $(...).css("background-image", ...)。解决方案。这行得通，但是当我随后更改 css 中 url 的值时(即 background: url(foo.jpg); => background: url(bar.jpg))，background-img 值不会改变.

对于 css 更改，我的脚本会重新加载链接的样式表。我怀疑我通过 javascript 分配的值优先于链接样式表中的 css 规则 ala 内联样式属性的值。

问题:
无论如何强制 Chrome 重新计算并应用来自外部样式表的值，并将其应用于具有由 jquery 的 $(...).css("...","...") 分配的样式的元素功能？

谢谢大家

Answer 1

通常，如果您想在某个事件上更改/重新加载背景图像，请尝试在主元素中嵌入一个 span 或其他元素，然后在其上设置背景图像。然后您可以替换该元素而无需重新加载整个样式表。像这样:

<div class="content-element">
    <span class="bg-image-element" style="background-image: url('old.png')"></span>
    <!-- .... other stuff .... -->
</div>

<script>
    $('.some-element').someEvent(function() {
        $('.bg-image-element').replaceWith(<span class="bg-image-element" style="background-image: url('new.png')"></span>
    });
</script>

当仅通过 javascript/jQuery 更改 css 背景图像时，我没有看到一致的行为。但是替换整个元素似乎确实会强制重新加载背景图像。