Are unused pictures still loaded when page loads?

Question

I have a website that has a function call, which after business hours, in my time zone switches to 'night mode'.

The php file has the divs for the night mode as well as the day mode in one file for day mode the divs have "day-" prefix and night mode has "night-" prefix.

and the css has all of the urls for each divs background image.

now when the website is in 'day mode' using the "day-" divs are the "night-" divs background images still loaded and vice versa? ---i.e. will they affect the pages load times?

(supplementary information ---- this is not javascript its only php so it only changes if they page is opened before closing time and refreshed after closing time.)

EDIT -adding code so to be more useful to others

Heres the PHP

<?php
date_default_timezone_set('Asia/Tbilisi');

$c_time = mktime();
$open = strtotime('Today 8am');
$close = strtotime('Today 8pm');
?>


<?php if ($c_time > $open && $c_time < $close): ?> <!-- BEGIN DAY MODE -->

 <div id="animated-head-link">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="Return to  <?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' Homepage." rel="home">

    <div id="sky" class="stage">       </div><!-- END SKY -->

     </a> 
  </div><!-- END ANIMATED-HEAD-LINK -->      <!-- END DAY MODE -->


 <?php else: ?> <!-- BEGIN NIGHT MODE -->

  <div id="animated-head-link">
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="Return to  <?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' Homepage." rel="home">

    <div id="night-sky">        </div><!-- END NIGHT-SKY -->

   </a> 
 </div><!-- END ANIMATED-HEAD-LINK -->

<?php endif; ?><!-- END NIGHTMODE -->

and the CSS

#sky {
overflow:hidden;
margin: 0px;
background: url('img/bg.png');
max-height: 200px;
min-height: 150px;
height: 20%;
width:100%;
max-width: 1400px;
margin-bottom: -24px;
}


#night-sky {
overflow: hidden;
margin: 0px;
background: url('img/night-bg.png');
max-height: 200px;
min-height: 150px;
height: 20%;
width:100%;
max-width: 1400px;
margin-bottom: -24px;
}

I've only included two of the divs as there are more divs contained. However, that should be enough information to support the question.

Yes, Why dont you create two seperate CSS for day/night and load the file according to your setting using IF/ELSE. — Sudip Pal, Feb 28 '13 at 08:19
@Tom Walters Your right it is close to the other question my search didn't pick it up, I was more interested as to whether using the if statement would load both images into the DOM, but from my understanding it wont. I will add some code just to make this more useful to others — gcoulby, Feb 28 '13 at 09:42

Fabian Schmengler · Accepted Answer · 2013-02-28T08:39:07.843

5

If I understand you correctly, you have something like this:

CSS

.day { background-image: url(day.jpg); }
.night { background-image: url(night.jpg); }

PHP

<div class="<?php echo $day ? 'day' : 'night'; ?>">

This means, the generated HTML output uses only one of the classes at a time. Then the other images will not be loaded. They would be loaded if both classes were used in the HTML, even with invisible elements.

edited Feb 28 '13 at 08:39

answered Feb 28 '13 at 08:29

Fabian Schmengler

24,155
9
79
111

I was going to paste the code but you don't need the code your answer is correct. if I call upon the image in the css it doesn't load ....however, If i had if day > img src="day.jpg" if night > img src="night.jpg" Then this would load both of the pictures? if I understand you correctly. – gcoulby Feb 28 '13 at 09:34
No, there would still be only one reference at a time in your HTML output and not even anything in the CSS. How should the client even know about the other option in that case? – Fabian Schmengler Feb 28 '13 at 10:05

score 1 · Answer 2 · answered Feb 28 '13 at 08:32

It is not.

You can check with your browser, many of browsers support "developer tools" where you can see what traffic is actually made. (e.g. Firefox has Firebug tool)

You can try it on this example:

<html>
  <head>
  <title>Test</title>
  <style type="text/css">
  <!--
  #middle { width: 800px; height: 600px; border: 2px solid #AFF; margin: 100px; }

  .day {background-image: url('http://i1.trekearth.com/photos/88915/night_and_day.jpg');}
  .night {background-image: url('http://smartpei.typepad.com/.a/6a00d83451db7969e20153903c3136970b-800wi');}   
  //-->
  </style>
  </head>
  <body>
  <div id="middle" class="night">
  </div>
  </body>
</html>

score 1 · Answer 3 · answered Feb 28 '13 at 08:38

1

it is if you are rendring night- containing html in day mode with display:none or hidden properties.

answered Feb 28 '13 at 08:38

Zaheer Ahmed

28,160
11
74
110

score 1 · Answer 4 · answered Feb 28 '13 at 09:05

1

CSS will only load image that are needed/that have references out of the HTML:

enter image description here

You see GET logo-nl.png, there is also a logo-fr.png, that is not loaded, only if a change language on the site, than the logo-nl.png will be in cache and the logo-fr.png will be loaded.

answered Feb 28 '13 at 09:05

Mark

6,762
1
33
50

Thanks, I just checked the activity window in safari and as you all have rightly said their is no night-bg.png i forgot about that I normally just use chrome. which doesn't have the file list – gcoulby Feb 28 '13 at 10:00

Are unused pictures still loaded when page loads?

4 Answers4