页面加载时仍未加载未使用的图片吗？

我有一个网站，有一个函数调用，这在工作时间后，在我的时区切换到'夜间模式'。页面加载时仍未加载未使用的图片吗？

php文件有一个文件白天模式的div有为夜间模式的div以及白天模式“day-”前缀和夜间模式具有“晚上 - ”字首。

和CSS具有所有的divs背景图像的url。

现在，当该网站是在“天模式”使用“day-”的div是“晚上 - ” div的背景图像仍然加载，反之亦然？ ---即。 会影响页面加载时间吗？

（补充资料----这不是在JavaScript中的唯一的PHP，因此只有当它们页关门前打开并刷新关闭时间前后发生了改变。）

编辑-adding代码，以便于对其他人

继承人更有用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 -->

和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; 
}

我只包含了两个div，因为还有更多的div。但是，这应该是足够的信息来支持这个问题。

来源

2013-02-28 gcoulby

向我们展示一些代码。 – 2013-02-28 08:18:50

是的，为什么不建立两个独立的CSS日/夜，并根据您的设置使用IF/ELSE加载文件。 – 2013-02-28 08:19:57

@Tom Walters你的权利接近另一个问题，我的搜索没有拿起它，我更感兴趣的是，如果使用if语句将两个图像加载到DOM，但从我的理解不会。我将添加一些代码，以使其他人更有用 – gcoulby 2013-02-28 09:42:45

如果我理解正确的话，你有这样的事情：

CSS

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

PHP

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

这意味着，生成的HTML输出仅使用一个在一次的课程。然后其他图像将而不是被加载。他们将加载如果两个类都在HTML中使用，即使有不可见的元素。

来源

2013-02-28 08:29:54

我要粘贴代码，但不需要代码，您的答案是正确的。如果我在css中呼吁图像无法加载....但是，如果我有如果一天> IMG SRC =“day.jpg” 如果夜> IMG SRC =“夜.jpg“ 然后这会加载这两个图片？如果我正确理解你的话。 – gcoulby 2013-02-28 09:34:46

不，在HTML输出中一次只能有一个引用，甚至在CSS中也没有。在这种情况下，客户应该如何知道其他选择？ – 2013-02-28 10:05:29

它是而不是。

您可以使用浏览器进行检查，许多浏览器都支持“开发人员工具”，您可以在其中查看实际制作的流量。（例如。Firefox的Firebug的工具）

你可以试试下面这个例子：

<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>

来源

2013-02-28 08:32:36 Buksy

是如果你是rendring night-在day mode包含HTML与display:none或hidden性能。

来源

2013-02-28 08:38:53

CSS将只显示所需/有出HTML的引用负荷的形象：

enter image description here