javascript - 网页从MySQL加载图片慢

Question

我正在构建一个网页，其中我在 slider 中显示大约 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(使用浏览器的网络分析器检查它)需要很长时间才能加载。