Different behavior with hidden html elements in different browsers

Question

I have a div with display:none as style attribute value. In css, a background image url is set for this div. I simply don't want the request for the image to be fired until the div is visible later through some JS code. In Firefox , the network tab shows that the request is not issued which is as expected. But in Chrome developer tools I found that the request for the image is actually fired after the DOMContentLoaded event. What could be the possible reason of different behaviors with hidden elements in these two different browsers ?

Markup:

<html>
<head>
    <title></title>
    <style type="text/css">
        .remoteAudioSoundButton{
            background: url("http://ourserverurl/images/image_lady.png");
            width: 200px;
            height: 200px;
            border: 2px black;
        }
    </style>
</head>
<body >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton' style="display:none"></div>
<script type="text/javascript">
    window.onload = function(){
        console.log("inside onload");
    };
</script>
</body>
</html>

Screenshots:

Chrome:

enter image description here

Firefox:

enter image description here

Related: http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading — jdphenix, Feb 24 '15 at 07:16

score 2 · Answer 1 · answered Feb 24 '15 at 07:15

Why not add the background to a specific class? This way the image will only be loaded when the specific class is added to the element.

$(function(){
  $('button').click(function() {
    $('.remoteAudioSoundButton').toggleClass('visible');
  });
});

.remoteAudioSoundButton{
  display: none;
  width: 200px;
  height: 200px;
  border: 2px black;
}
.visible {
  background: url("http://ourserverurl/images/image_lady.png");
  display: block;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton'></div>
<button>Toggle Class</button>

Nice. I am gonna do like this. – Md. Arafat Al Mahmud Feb 24 '15 at 07:38 — Md. Arafat Al Mahmud, Feb 24 '15 at 07:38
The downloaded image isn't rendered in IE8 – Md. Arafat Al Mahmud Feb 24 '15 at 09:27 — Md. Arafat Al Mahmud, Feb 24 '15 at 09:27

score 2 · Answer 2 · answered Feb 24 '15 at 07:19

Here is documentation of different browser behavior:

http://justinmarsan.com/hidden-elements-and-http-requests/

Which says:

Chrome and Safari (WebKit)

WebKit downloads the file every time except when a background is applied through a non-matching media-query. Firefox

Firefox won’t download the image called with background image if the styles are hidden but they will still download assets from img tags. Opera

Like Firefox does, Opera won’t load useless background-images. Internet Explorer

IE, like WebKit will download background-images even if they have display: none;

So to answer the question of why:

A quick argument for either side:

Firefox - Don't load until the content is visible: No reason to load something not being viewed, improve page load time.

Webkit - Load the image on pageload: So, perhaps JavaScript decides to make the element visible later, the transition might be choppy if the image is not preloaded, and any other number of arguments for preloading images.

And a brief discussion of the topic:

http://robertnyman.com/2010/03/11/do-hidden-elements-load-background-images/

So there is no workaround of this particular problem in pure HTML/CSS ? — Md. Arafat Al Mahmud, Feb 24 '15 at 07:29
no. but why does that matter? if you are already using JS, the method of setting the background-image style with a different class. as suggested by another answer, sounds like the best option — chiliNUT, Feb 24 '15 at 07:36

score 0 · Answer 3 · answered Feb 24 '15 at 07:17

0

Browsers may load images that are related to elements that have display:none; set.

I have worked around this before by using a technique like this snippet:

document.getElementById('showKitty').addEventListener('click', function() {
    var kitty = document.getElementById('kitty'); 
    kitty.src = "https://placekitten.com/g/200/300"; 
    kitty.classList.toggle('hidden');
});

.hidden {
  display:none;
}

<h1>What Can JavaScript Do?</h1>
<img id="kitty" class="hidden">
<button id="showKitty">Show kitten</button>

answered Feb 24 '15 at 07:17

jdphenix

15,022
3
41
74

So you have to manually set the src from JavaScript later. But what if the src attribute value is only known to the html/css designer ? And the guy manipulating the page in JavaScript has only the task to show or hide the element. – Md. Arafat Al Mahmud Feb 24 '15 at 07:28
Admittedly I'm both guys. – jdphenix Feb 24 '15 at 07:28

Different behavior with hidden html elements in different browsers

3 Answers3