Question

我正在建立一个网页，我在一个滑块中显示大约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>

页面在服务器和浏览器中的加载速度非常慢。我尝试缩小图像大小，但没有任何改进。

Answer 1

您可以像这样清理代码：

// 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正确分开。现在，所有错误应该更明显，更容易。您可以在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（使用浏览器的网络分析器检查）是否需要加载时间。

Answer 2

尝试

Jpeg图片而不是png
使用选项＆＃34保存图像;为网络保存图像＆＃34;
您可以使用RIOT图片优化工具
为了减少加载时间，您可以使用CSS sprites，它是显示一块较大图像的CSS代码。此技术通常用于按钮上的鼠标悬停状态。例如。使用精灵，您可以在网站上显示一段图像作为按钮，并在用户将鼠标悬停在图像上时显示该图像的不同部分。
根本不要使用图像。我们可以使用CSS生成圆角矩形，渐变，阴影和透明图像

Answer 3

我认为您应该尝试将图像存储在磁盘上，并检查图像是否从硬盘驱动器加载得更快。

网页从MySQL缓慢加载图像

3 个答案: