我正在构建一个网页,我在滑块中显示大约10张照片。照片是从上传的文件夹中获取的,代码如下所示。
<div class="main">
<div class="main_slider">
<div id="bg"> <a href="#" class="nextImageBtn" title="next"></a> <a href="#" class="prevImageBtn" title="previous"></a> <img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" /> </div>
<div id="preloader"> <img src="images/ajax-loader_dark.gif" width="32" height="32" /> </div>
<!--<div id="img_title"></div>-->
<div id="toolbar"> <a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="images/toolbar_fs_icon.png" width="50" height="50" /></a> </div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php
include("connect.php");
$s=mysql_query("Select image from gallery where active_home=1 ") or die(mysql_error());
while($row=mysql_fetch_array($s))
{
$img=$row["image"];
//$image= "<img src='"images/gallery/$img'" width=200 height=120>";
echo "<div class=content_img>";
echo "<div> <a href='"images/gallery/$img'"> <img src='"images/gallery/$img'" height=138 width=238 alt=image class=thumb style=opacity:0.6;/></a> </div>";
echo " </div> ";
}
?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
页面在服务器上加载非常慢,浏览器经常崩溃。
你可以这样清理你的代码:
// Main PHP part
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
// Main HTML part
?>
<div class="main">
<div class="main_slider">
<div id="bg">
<a href="#" class="nextImageBtn" title="next"></a>
<a href="#" class="prevImageBtn" title="previous"></a>
<img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" />
</div>
<div id="preloader">
<img src="images/ajax-loader_dark.gif" width="32" height="32" />
</div>
<div id="toolbar">
<a href="#" title="Maximize" onClick="ImageViewMode('full');return false">
<img src="images/toolbar_fs_icon.png" width="50" height="50" /></a>
</div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php foreach ($images as $image) { ?>
<div class="content_img">
<div>
<a href="images/gallery/<?= $image; ?>">
<img src="images/gallery/<?= $image; ?>" height="138" width="238" alt="image" class="thumb" style="opacity:0.6;" />
</a>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
这样,您就正确地将HTML与PHP分开了。现在,所有的bug都应该更明显、更容易了。您可以在PHP末尾添加检查,您可以忘记需要用'"
手动转义"
,您的代码更加集中和干净。请注意,我已经将代码从mysql_更改为PDO,所以现在它不应该真正工作(您需要创建$DB = new PDO()
,通常在connect.php
中)。
甚至,现在您可以通过这样做来测试问题在哪里:
$start = microtime(true);
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
echo "Load time: " . (microtime(true) - $start) . "<br>";
这样你就知道是你的PHP还是你的HTML(用浏览器的网络分析器检查)什么需要很长时间加载
Try
-
Jpeg图像代替png
-
使用"Save image for web"选项保存图像
-
可以使用RIOT图像优化工具
-
为了减少加载时间,你可以使用CSS精灵,这是CSS代码,显示一个较大的图像的一部分。这种技术通常用于按钮上的鼠标悬停状态。例如,使用精灵,你可以在网站上显示图像的一部分作为按钮,并在用户将鼠标移到图像上时显示该图像的另一部分作为按钮。
-
完全不要使用图像。我们可以使用CSS
生成圆角矩形、渐变、投影和透明图像。
我认为你应该尝试将图像存储在磁盘上,并检查图像从硬盘驱动器加载是否更快。