如何触发图像重新加载，无论它们在哪里使用（CSS 背景图像、伪元素、样式属性、img 标签）

Question

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

问题是这些资产可以很多的不同形式出现：

<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 出现的样式声明，并能够将该样式声明设置为 URL 和 ?_lf=1493306569919 附加。此外，它可能不在 styleSheets 中，因为它在 DevTools 中被覆盖了。所以只是 window.getComputedStyles，但这是只读的。并且 .getMatchedCSSRules 已弃用且仅限 WebKit。

Answer 1

我找不到 API 用于向页面上的所有图像资源发送更新信号。所以我为 livereload.js 编写了一个补丁来遍历每个元素（和伪元素），检查媒体 src，并通过附加查询或哈希字符串使其在文件更改时重新加载。

这是 my fork of gulp-server-livereload 中的解决方案。代码注释中有更多详细信息。

到目前为止，它处理了以下内容：

☑ <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> 源
☐等

下面是它的实际演示：

Answer 2

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

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

如何触发图像重新加载，无论它们在哪里使用（CSS 背景图像、伪元素、样式属性、img 标签）

How can I trigger images reload regardless of where they're used (CSS background-image, pseudo-element, style attribute, img tag)

javascript

css

dom

image

livereload