我需要解释浏览器(Chrome/FF)如何加载CSS图像.
据我目前所知，CSS用作背景图像的图像会作为请求出现在网络选项卡中，相应的CSS文件作为启动器.
我目前的体验并不涵盖这一点-我体验到图像，这些图像由CSS加载，并且在页面上可见(非懒惰、上方、匿名窗口、禁用缓存的DevTools)-但不存在于网络选项卡中的请求列表中.当然，它涉及这个页面:https://www.arag.de/rechtsschutzversicherung/，关于这个图像，在页面的最顶部，如屏幕截图所示-它不会作为请求出现在网络选项卡中.
我的问题:我try 用两个控制台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()