Question

我有一个有功能调用的网站，在工作时间后，在我的时区切换到'夜间模式'。

php文件具有夜间模式的div和白天模式的一个文件中的日期模式div有 “day - ” 前缀和夜间模式有 “night - ” 前缀。

并且css具有每个div背景图像的所有URL。

现在，当网站处于'日模式'时，使用“day - ” div是“night - ” divs背景图片仍然加载，反之亦然？ ---即。 会影响网页加载时间吗？

（补充信息----这不是javascript它唯一的php所以只有在关闭时间之前打开页面并在关闭时间之后刷新它才会改变。）

编辑 - 添加代码以便对其他人更有用

继承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。但是，这应该是足以支持这个问题的信息。

Answer 1

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

<强> CSS

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

<强> PHP

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

这意味着，生成的HTML输出一次只使用其中一个类。然后其他图像将不加载。如果在HTML中使用这两个类，即使使用不可见元素，也会加载。

Answer 2

不。

您可以在浏览器中查看，许多浏览器都支持“开发人员工具”，您可以在其中查看实际的流量。（例如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>

Answer 3

如果您使用night-或day mode属性在display:none中加载包含html的hidden。

Answer 4

CSS只会加载需要/具有HTML引用的图像：

enter image description here

你看到GET logo-nl.png，还有一个logo-fr.png，没有加载，只有当网站上的更改语言，而不是logo-nl.png将在缓存和徽标中-fr.png将被加载。

页面加载时是否仍然加载未使用的图片？

4 个答案: