cssgoogle-chrome-devtoolsbackground-imagefirefox-developer-tools

Why don't image load requests show up in network requests for me?

I need an explanation on how browsers (Chrome/FF) load CSS images.

According to my current knowledge, images used by CSS as background-image, appear in the network tab as requests, with according CSS file as Initiator.

My current experience doesn't cover this - I experience images, which are loaded by CSS and are visible on the page (non-lazy, above-the-fold, incognito window, DevTools with disabled cache) - but not present in the list of requests in the network tab. Certainly it goes about this page: https://www.arag.de/rechtsschutzversicherung/, about this image, on the very top of the page, as on screenshot - it doesn't appear in the Network tab as request.

enter image description here

My issue: I try to count images on the page, with two console Javascripts. Nor both Javascripts, neither Network tab lists those affected images.

And so I need an explaination of browser working to understand, how can it happen, that some images don't appear as requests, despite they are loaded by CSS with background:(img).

Here are Javascripts I count images:

  1. For background images:

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);

  1. For 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()

Solution

  • The cached images won't be re-downloaded, so they won't appear in the network tab. So these images do not affect the loading, but their status appears as: "200 OK (from disk cache)".

    You need to check :before and :after pseudo-elements separately because they are not standalone HTML elements, but rather parts of an element.

    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>