Javascript 网页从MySQL缓慢加载图像

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

该页面在服务器中加载速度非常慢，浏览器频繁崩溃。我已尝试减小图像大小，但没有任何改进。

试试看

• Jpeg图像代替png

• 使用“为web保存图像”选项保存图像

• 您可以使用图像优化工具

• 为了减少加载时间，可以使用CSS精灵，这是显示较大图像片段的CSS代码。这种技术通常用于鼠标悬停在按钮上的状态。例如，使用sprite，您可以在站点上以按钮的形式显示图像的一部分，并在用户将鼠标悬停在图像上时以按钮的形式显示该图像的另一部分

• 根本不要使用图像。我们可以使用CSS生成圆角矩形、渐变、阴影和透明图像

---

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

您可以像这样清理代码：

// 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>

$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（请使用浏览器的网络档案器进行检查）需要很长时间才能加载。

我们可以查看图像吗？您可以给我们提供网页链接吗？网页还没有激活…也不安全。因此，在这里提供链接是一种风险。好的，但至少，你确定不是因为太多太大的图像导致了这次事故吗？我建议将更好的HTML和PHP分开，这样代码更清晰，bug更容易发现。此外，出于安全考虑，我对一些大图片进行了优化，缩小了它的大小，但结果并不令人满意。分离html和php是什么意思。？好的，那么我应该使用mysqli函数吗@FranciscoPresenciaIt正以这种方式快速加载。@vicks直接在数据库中存储图像通常不被认为是最佳实践。我建议尝试将图像存储为文件，然后将路径存储到数据库中。我曾使用RIOT进行优化，但结果并不令人满意OK谢谢我会尝试一下谢谢你它与pdo连接的效果非常好…非常感谢@Francisco Presencia我很高兴它有所帮助。我发现将PHP与HTML分离可以改进查找此类bug（这里可能是无限递归？）。您还可以添加一个

var\u转储（$images）在PHP之后检查图像是否正确创建（以防需要进一步调试）。