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.

Answer 1

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.