Does an image inside of display: none still load in the background?

Jason C

unread,

Jul 31, 2012, 12:12:26 AM7/31/12

to

Let's say that I have this:

<div style="display: none">
<img src="whatever.jpg" width="75" height="75" border="0">
</div>

Is the image still going to load in the background, and just not show on the page? Or does it not load at all, and take no bandwidth?

For my purpose, I have a page with about 2,000 images, and I'm using display: none to hide all but the first 50; then, as the user scrolls down, I'm changing display: to "block" based on scrollTop. What I'm wanting to ensure is that, even though the pictures are hidden, they're not still loading in the background until they're needed.

Barry Margolin

unread,

Jul 31, 2012, 1:15:14 AM7/31/12

to

In article <5658cd9d-20f4-4fd1...@googlegroups.com>,

Why don't you check the log on your server to see which images have been
requested?

--
Barry Margolin, bar...@alum.mit.edu
Arlington, MA
*** PLEASE post questions in newsgroups, not directly to me ***

Jason C

unread,

Jul 31, 2012, 1:42:18 AM7/31/12

to

On Tuesday, July 31, 2012 1:15:14 AM UTC-4, Barry Margolin wrote:
> Why don't you check the log on your server to see which images have been
>
> requested?

That's a little easier said than done. I'm working on a live site with a large access log, and the images will all be loading on the existing page. That makes it pretty difficult to track down an image call from a specific page at a specific time.

It can be done, but I was hoping this would be common knowledge.

Jukka K. Korpela

unread,

Jul 31, 2012, 3:28:12 AM7/31/12

to

2012-07-31 8:15, Barry Margolin wrote:

> In article <5658cd9d-20f4-4fd1...@googlegroups.com>,
> Jason C <jwca...@gmail.com> wrote:
>
>> Let's say that I have this:
>>
>> <div style="display: none">
>> <img src="whatever.jpg" width="75" height="75" border="0">
>> </div>
>>
>> Is the image still going to load in the background, and just not show on the
>> page? Or does it not load at all, and take no bandwidth?

[...]

> Why don't you check the log on your server to see which images have been
> requested?

Not a very practical idea for several reasons, including the possibility
than an author may have absolutely no access to server logs. More
practically, hit F12 on any normal modern browser and use its debugging
and inspection tools.

For example, on Chrome, after hitting F12, select the "Network" tab and
open your test document. I didn't even need a real image file on a
server, I just used an <img> tag with an invented src attribute and saw
Chrome sending a GET request to the server identified in it.

So yes, although this is not specified in the specifications and
browsers could conceivably behave otherwise, browsers do fetch image
resources specified in src attributes even though the <img> element is
affected by display: none. This keeps browsers a little simpler, and it
helps user experience when an <img> element is switched to displayable
via CSS or via JavaScript.

Thus, to deal with the given situation,

>> For my purpose, I have a page with about 2,000 images, and I'm using
>> display: none to hide all but the first 50; then, as the user
>> scrolls down, I'm changing display: to "block" based on scrollTop.
>> What I'm wanting to ensure is that, even though the pictures are
>> hidden, they're not still loading in the background until they're
>> needed.

... the page should be constructed e.g. so that its <img> tags have fake
src attributes, or no src attributes at all, and these attributes are
changed or added when additional images are to be shown. You can't do
such things in CSS, you need some client-side scripting, or you need to
divide the material to different pages.

On the other hand, the approach results in suboptimal user experience.
There would be a delay when moving from one set of images to another. A
better approach could be (if you expect the image sets to be viewed
sequentially) to have the next set of 50 images downloaded
asynchronically on the background. But this takes us rather far from CSS.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Thomas 'PointedEars' Lahn

unread,

Jul 31, 2012, 4:29:47 AM7/31/12

to

Barry Margolin wrote:

> Jason C <jwca...@gmail.com> wrote:
>> Let's say that I have this:
>>
>> <div style="display: none">
>> <img src="whatever.jpg" width="75" height="75" border="0">
>> </div>
>>
>> Is the image still going to load in the background, and just not show on
>> the page? Or does it not load at all, and take no bandwidth?

>> […]

>
> Why don't you check the log on your server to see which images have been
> requested?

Even simpler, check the Net(work) tab in several browser built-in developer
tools, or Firebug.

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300...@news.demon.co.uk>

Jason C

unread,

Jul 31, 2012, 5:04:56 AM7/31/12

to

On Tuesday, July 31, 2012 3:28:12 AM UTC-4, Jukka K. Korpela wrote:
> ... the page should be constructed e.g. so that its <img> tags have fake
>
> src attributes, or no src attributes at all, and these attributes are
>
> changed or added when additional images are to be shown. You can't do
>
> such things in CSS, you need some client-side scripting, or you need to
>
> divide the material to different pages.

Based on this logic, would it not be acceptable to create an empty DIV in place of the image, and then set a background-image dynamically at the same time that I change the display style?

Something like:

<div id="img_12345" style="display: none; height: 75px; width: 75px"></div>

// Javascript
function whatever() {
document.getElementById('img_12345').style.backgroundImage=
"url(whatever.jpg)";

}

> On the other hand, the approach results in suboptimal user experience.
>
> There would be a delay when moving from one set of images to another. A
>
> better approach could be (if you expect the image sets to be viewed
>
> sequentially) to have the next set of 50 images downloaded
>
> asynchronically on the background. But this takes us rather far from CSS.

Excellent point. They would be viewed sequentially, so loading the next 50 while viewing the current 50 is a very good suggestion.

dorayme

unread,

Jul 31, 2012, 5:05:25 AM7/31/12

to

In article <5658cd9d-20f4-4fd1...@googlegroups.com>,
Jason C <jwca...@gmail.com> wrote:

It seems implausible to think that the styling would stop this. If you
deliberately turn off the styling in many a good modern browser, it
frees the webpage from the styling in the author sheet. If a large
image suddenly appears as if by magic, then it was, of course,
downloaded as specified in the HTML.

You can easily test this intuition. Put a large picture on a server.
Put up an html page that refers to it in an img element. See how long
it takes to show up. Put another equally large image (or clear your
cache and use the same image) but this time use an HTML page that
contains provides for some CSS to have the img display: none. Wait a
while - in the meantime watching how the spinning circle or whatever
the browser uses to denote downloading activity keeps going thus
rather settling the question prematurely - and then use the facility
(Firefox and Safari both has it) to turn off styling. The picture will
appear immediately, not slowly.

Here, try this if 4 or 5 MB does not worry you:

<http://paintingservicesaustralia.com.au/display.html>

and

<http://paintingservicesaustralia.com.au/displayNone.html>

and see for yourself.

As you might know, you need to be careful loading up a lot of pictures
that are not for immediate use as this will disadvantage people with
slow connections and limited bandwidth.

--
dorayme

Michael Joel

unread,

Jul 31, 2012, 9:15:04 AM7/31/12

to

Just a simple suggestion
Put up a really big picture. One that takes about a minute or two to load.

Test it. If the browser doesn't stop loading for that amount of time it
would suggest that it is loading. Then do not change anything but remove
the display:none;
Now if it did load it will still take that long to display - if it did
load then it will be in the browser cache (if it is set to allow it to)
and will be almost instantly.

Just a simple test.

Michael Joel

unread,

Jul 31, 2012, 9:16:27 AM7/31/12

to

Michael Joel wrote:
> Now if it did load it will still take that long to display - if it did

correction:
Now if it did NOT load it will still take that long to display - if it
did ...

Jukka K. Korpela

unread,

Jul 31, 2012, 9:26:56 AM7/31/12

to

2012-07-31 12:04, Jason C wrote:

> On Tuesday, July 31, 2012 3:28:12 AM UTC-4, Jukka K. Korpela wrote:
>> ... the page should be constructed e.g. so that its <img> tags have fake
>>
>> src attributes, or no src attributes at all, and these attributes are
>>
>> changed or added when additional images are to be shown. You can't do
>>
>> such things in CSS, you need some client-side scripting, or you need to
>>
>> divide the material to different pages.
>
> Based on this logic, would it not be acceptable to create an empty DIV
> in place of the image, and then set a background-image dynamically
> at the same time that I change the display style?

It would, but it's generally not a good idea to use background images
for presenting content. For one thing, loading of background images
might have been switched off for efficiency.

Since the approach would be application-like anyway, I think it could
start with almost empty content, just heading and things like that,
loading fast, and with client side JavaScript that starts loading the
first 50 images. It can add the img elements to the DOM tree (and they
could even be removed later).

As a more web-page-like approach, you could divide the content into
pages each containing 50 images and each preloading, with JavaScript,
the next 50 images in the background.

--
Yucca, http://www.cs.tut.fi/~jkorpela/