2

我有一个网站，它有一个函数调用，在工作时间之后，在我的时区切换到'night mode'。

php 文件具有夜间模式的 div 以及白天模式的一个文件中的白天模式，div 具有“day-”前缀，而夜间模式具有“night-”前缀。

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

现在当网站处于“白天模式”时，使用“day-” div 是否仍会加载“night-” div 背景图像，反之亦然？ ---即它们会影响页面加载时间吗？

（补充信息----这不是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。但是，这应该足以支持该问题。

4

4 回答 4

5

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

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-28T08:29:54.160 回答
1

它不是。

您可以使用浏览器进行检查，许多浏览器都支持“开发人员工具”，您可以在其中查看实际产生的流量。（例如 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-28T08:32:36.863 回答
1

如果您正在渲染包含带有或属性night-的html 。day modedisplay:nonehidden

于 2013-02-28T08:38:53.863 回答
1

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

在此处输入图像描述

您会看到 GET logo-nl.png，还有一个 logo-fr.png，它没有加载，只有在网站上更改语言时，才会将 logo-nl.png 和 logo-fr 放在缓存中。 png 将被加载。

于 2013-02-28T09:05:17.880 回答