Welcome to WebmasterWorld Guest from 3.227.233.55

Forum Moderators: not2easy

Message Too Old, No Replies

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

     
2:03 am on May 22, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1165
votes: 118


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?
3:17 am on May 22, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4453
votes: 330


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.
4:27 am on May 22, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1165
votes: 118


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?
4:47 am on May 22, 2018 (gmt 0)

New User

joined:Nov 15, 2015
posts: 39
votes: 2


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.
4:58 am on May 22, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15804
votes: 845


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.
7:13 am on May 22, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1165
votes: 118


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
}
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members