浏览器如何使用 CSS 图像？

Question

我需要解释一下，浏览器（Chrome/FF）如何加载 CSS 图像。

根据我目前的了解，CSS使用的图像作为背景图像，作为请求出现在网络选项卡中，并以相应的CSS文件作为启动器。

我目前的经验不包括这一点 - 我体验过图像，这些图像由 CSS 加载并在页面上可见（非惰性、首屏、隐身窗口、禁用缓存的 DevTools） - 但不存在于网络选项卡中的请求列表。当然，它涉及此页面：https://www.arag.de/rechtsschutzversicherung/，关于此图像，位于页面的最顶部，如屏幕截图所示 - 它不会根据请求出现在“网络”选项卡中。

我的问题：我尝试使用两个控制台 JavaScript 来计算页面上的图像数量。两个 Javascript 都没有，网络选项卡都没有列出那些受影响的图像。

所以我需要解释一下浏览器的工作原理，以理解为什么有些图像不会作为请求出现，尽管它们是由具有背景的 CSS 加载的：(img)。

这里是我计算图像的Javascript：

对于背景图片：

var elems = document.getElementsByTagName('*'),
  backgrounds = [];
for (var i = 0, len = elems.length; i < len; i++) {
  if (window.getComputedStyle(elems[i], null).getPropertyValue('background-image') != 'none') {
    backgrounds.push(window.getComputedStyle(elems[i], null).getPropertyValue('background-image'));
  }
}
console.log(backgrounds);

对于img

var imageSearch = {
  image_array: {},
  valid_image_nodes: ["DIV", "P", "SECTION", "SPAN"],
  scan_for_valid_images: function(node) {
    if (node.nodeType === 1) {
      if (node.nodeName === "IMG") {
        this.image_array[node.getAttribute("src")] = true;
      } else {
        if (this.valid_image_nodes.indexOf(node.nodeName) !== -1) {
          div_style = node.currentStyle || window.getComputedStyle(node, false);
          if (div_style.backgroundImage !== "none") {
            url = div_style.backgroundImage;
            this.image_array[url.slice(4, url.indexOf(')'))] = true;
          }
        }
      }
    }
    var children = node.childNodes;
    for (var i = 0; i < children.length; i++) {
      this.scan_for_valid_images(children[i]);
    }
  },
  get_image_array: function() {
    return Object.keys(this.image_array)
  }
}
imageSearch.scan_for_valid_images(document);
imageSearch.get_image_array()

Answer 1

缓存的图像不会重新下载，因此它们不会出现在网络选项卡中。因此这些图像不会影响加载，但它们的状态显示为：“200 OK（来自磁盘缓存）”。

您需要分别检查

:before

和

:after

伪元素，因为它们不是独立的 HTML 元素，而是元素的一部分。

var elems = document.querySelectorAll('*'),
  backgrounds = [];

elems.forEach(function(elem) {
  var computedStyle = window.getComputedStyle(elem),
      backgroundImage = computedStyle.getPropertyValue('background-image');

  // If the background image of the element is not 'none', add it to the backgrounds array
  if (backgroundImage !== 'none') {
    backgrounds.push(backgroundImage);
  }

  // Check if there is a ::before pseudo-element and its background image
  var beforeBackgroundImage = window.getComputedStyle(elem, ':before').getPropertyValue('background-image');
  if (beforeBackgroundImage && beforeBackgroundImage !== 'none') {
    backgrounds.push(beforeBackgroundImage);
  }

  // Check if there is an ::after pseudo-element and its background image
  var afterBackgroundImage = window.getComputedStyle(elem, ':after').getPropertyValue('background-image');
  if (afterBackgroundImage && afterBackgroundImage !== 'none') {
    backgrounds.push(afterBackgroundImage);
  }
});

console.log(backgrounds);

.example-div:before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  background-image: url('https://picsum.photos/200/200');
}

<div class="example-div"></div>

Answer 2

它实际上并没有解决您的确切问题，但它也确实解决了。您问“浏览器如何使用 CSS 图像？”对于您面临和描述的问题，您得到了很好的答案。

我认为最好补充一点，如果图像未在 DOM 中显示或未使用其类，则浏览器将不会下载图像。而且，工作方式也会有所不同。希望我没有错过这里的案例。

<html>
<head>
<title>test</title>
<style>
.hidden {
  display: none;
}
.image1 {
  background-image: url(https://th.bing.com/th?id=ORMS.4324f896b3fcd24d2fbd23f4acee8b3f&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0);
}
.image2 {
  background-image: url(https://www.bing.com/th?id=OAIP.45a4437adbcef2ae612a99c27810bd77&pid=AdsNative&c=3&w=300&h=157&dynsize=1&qlt=90);
}
.image3 { // Will NOT be download
  background-image: url(https://www.bing.com/th?id=OAIP.4e625d775faf9aa660301445beb1fc58&pid=AdsNative&c=3&w=300&h=157&dynsize=1&qlt=90)
}
img, div {
  width: 150px;
  height: 150px;
}
</style>
</head>
<body>
<div class="image1"></div> <!-- Will be download -->
<div class="image2 hidden"></div><!-- Will NOT be download -->
<div class="hidden"><!-- Will be download --><img src="https://th.bing.com/th?id=ORMS.deac19c7d112dcb8e985ebf6adef0364&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0" />
</div>
<img class="hidden" src="https://th.bing.com/th?id=ORMS.d36222a0f85043d70adee0486aa6679d&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0" /><!-- Will be download -->
</body>
</html>

浏览器如何使用 CSS 图像？

问题描述投票：0回答：2

2个回答

最新问题

浏览器如何使用 CSS 图像？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2