css Question posted in
Some basic documentation can be found here.

How works browser with CSS images?

I need an explaination, how browser (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()
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Its not actually addressing your exact question, but it also does. You asked "How works browser with CSS images?" and you got a great answers for the problem you faced and described.

    I thought that it would be good to add that, the browser will not download images if they are not display in DOM or their class being used. Moreover, will work differently. Hope I did not miss a case example here.

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search