javascript - 如何使用javascript从网页获取所有图像URL？

Question

有几种方法可以使用 JavaScript 加载图像 src url，例如使用 document.images 或选择所有 img 标签并获取 src。

但是我无法找到在 css 中使用图像 url 的方法。

例如，如果网页有以下 css 代码，它会加载 bg.png，但我无法使用上面提到的方法获取该 url。

.bg {
  background-image: url('bg.png');
}

有人知道如何在 css 中使用所有这些 url 吗？

Answer 1

Resource Timing API收集有关出站请求的数据，应该保留以 CSS 和内联样式高效收集图像的能力。

尚未对此进行测试，但类似的内容应该可以帮助您入门:

if ( !('performance' in window) ||
                 !('getEntriesByType' in window.performance) ||
                 !(window.performance.getEntriesByType('resource') instanceof Array)
                 ) {
                      alert('unsupported');
         } else {
            window.addEventListener('load', function() {
               var resources = window.performance.getEntriesByType('resource');
               for(var index in resources) {

                  for(var properties in resources[index]) {
                      console.log(properties);
                      console.log(resources[index][properties]);
                  }
                
               }
            });