页面加载时仍未加载未使用的图片吗?
我有一个网站,有一个函数调用,这在工作时间后,在我的时区切换到'夜间模式'。页面加载时仍未加载未使用的图片吗?
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。但是,这应该是足够的信息来支持这个问题。
如果我理解正确的话,你有这样的事情:
CSS
.day { background-image: url(day.jpg); }
.night { background-image: url(night.jpg); }
PHP
<div class="<?php echo $day ? 'day' : 'night'; ?>">
这意味着,生成的HTML输出仅使用一个在一次的课程。然后其他图像将而不是被加载。他们将加载如果两个类都在HTML中使用,即使有不可见的元素。
我要粘贴代码,但不需要代码,您的答案是正确的。如果我在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>
是如果你是rendring night-
在day mode
包含HTML与display:none
或hidden
性能。
CSS将只显示所需/有出HTML的引用负荷的形象:
你看GET徽标nl.png,还有一个标志,fr.png,即只有当网站上的变化语言比logo-nl.png会在缓存中并且logo-fr.png将被加载时才加载。
谢谢,我刚刚检查了safari中的活动窗口,因为你们都正确地说他们不是night-bg.png,我忘了我通常只是使用chrome。它没有文件列表 – gcoulby 2013-02-28 10:00:35
向我们展示一些代码。 – 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