頁面加載時仍未加載未使用的圖片嗎？

我有一個網站，有一個函數調用，這在工作時間後，在我的時區切換到'夜間模式'。頁面加載時仍未加載未使用的圖片嗎？

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