javascript - 无论在哪里使用，我如何触发图像重新加载(CSS 背景图像、伪元素、样式属性、img 标签)

Question

我正在尝试设置一个 livereload 服务器，当它们在磁盘上发生变化时重新加载图像 Assets 。没有页面刷新，只有媒体文件，重新加载。

问题是这些 Assets 可能以很多不同的形式出现:

• <style> CSS background-image: url('http://localhost:8080/myasset.png');
• <link> CSS background: url('http://localhost:8080/myasset.png') no-repeat 50%;
• style属性 background-image
• ::before/::after伪元素CSS
• <img>来源，srcset
• <video>来源，<source>资源
• 等等

<img> src 更新很容易

var liveUrl = imgTag.getAttribute('src');
liveUrl = __addUrlQueryParam(liveUrl, '_lf', Date.now());
imgTag.setAttribute('src', liveUrl);

但是尝试以这种方式为 CSS 样式声明或伪元素更新 URL……听起来非常令人沮丧。

是否可以使用替代技术在整个页面上普遍触发资源重新加载？

只有 URL 字符串是已知的。使用它的元素不是。它必须以某种方式在 DOM 中搜索元素，找到 URL 出现的样式声明，并能够将该样式声明设置为带有 ?_lf=1493306569919 的 URL。附加。此外，它可能不在 styleSheets 中。因为它在 DevTools 中被覆盖了。所以只是window.getComputedStyles ，但这是只读的。和 .getMatchedCSSRules已弃用且仅限 WebKit。

Answer 1

live-server似乎具有所需的行为。

运行 live-server --wait=100 --port=80 --host=livereload . 的 react 方式与我的其他答案中的演示相同: