Parent DIV set to display:none, will nested image still download?

[csdude55]

I'm not sure how to test this one on my own, so I'm turning to the pros yet again...

I have this:

<div style="display: none">
 <img src="example.jpg">
</div>

Will the image still download in the background, but just be hidden from view? If so, changing the image style to <img src="example.jpg" style="display: none"> prevent it from loading?

[not2easy]

Using display: none; should not load the image because its container is not 'on' the page - but I would want to check live headers to be certain.

[csdude55]

That was my thought, too, but when I clicked a button to make the DIV show, the image loaded MUCH faster than I expected! But that was just to the eye of the beholder.

Using Google Developer, I looked under Network and it appears to load it whether I have display: none in the container, in the image, or both :-(

Can you suggest a better way to test it?

[jbnz]

As I understand it (and with minimal testing) using display:none on either the containing div or the img tag itself does NOT prevent the image from being requested from the server. It is simply not displayed by the browser. Hence the image 'loading' much faster when you clicked a button to show the div - the image was already requested from the server and available for display on the client.

[lucy24]

I have personally dealt with this issue. Setting {display: none;} will not prevent any images inside the element from loading. Here is a specific situation where this applies:

p.collage {background: center no-repeat url("images/picname.jpg"); width: 701px; height: 888px;}

@media screen and (max-width: 720px)
 {
 p.collage {display: none; background-image: none;}
 }

The "background-image: none" is essential, because otherwise the image will load up even when the browser already knows it won't be displayed. I confirmed this by experiment: set a narrow browser window before opening the page, and see whether the image file is requested.

[csdude55]

Hmm, I was afraid of that!

I'm working on a carousel with a potentially unlimited number of images. I want to immediately load the one in the viewport and then the ones on the left and right (which are hidden but preloaded so that they'll load fast in the carousel), but don't need to load the 4th one until the 2nd one is in the viewport. Obviously, there's no need to load 20+ images if they're only going to look at a few of them.

The downside of using background-image is that I can't seem to find a way to test when it's fully loaded, so I can trigger the next one. Using jQuery's .on('load',...) doesn't work, and I had to predefine a width and height so measuring that doesn't work... any other thoughts?

This is becoming a Javascript subject now, but maybe something along the lines of...

var img = document.createElement('img');
img.src = 'example.jpg';

img.onload = function () {
 // blah blah blah
}