CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
Vicks
Vicks

Reputation: 107

Webpage loading images from MySQL slowly

I am building a webpage where i am displaying about 10 photos in a slider.The photos are being fetched from a folder where it is uploaded,the code is given below.

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

The page is loading very slow in the server and browser crashing frequently.I have tried reducing the image size but nothing improves.

Upvotes: 1

Views: 633

Answers (3)

Francisco Presencia
Francisco Presencia

Reputation: 8841

You can clean up your code like this:

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

In that way, you have properly separated the HTML from the PHP. Now, all bugs should be more obvious and easier. You can add checks at the end of the PHP, you can forget about needing to escape the " with \" manually and your code is more focused and clean. Note that I've changed the code from mysql_ to PDO, so now it shouldn't really work (you need to create the $DB = new PDO(), normally in connect.php.

Even more, now you can test where the problem is by doing something like this:

$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>";

In that way you know if it's your PHP or your HTML (check it with the browser's network profiler) what takes ages to load.

Upvotes: 1

Junaid
Junaid

Reputation: 436

I think you should try to store images on disk and check if images load faster from hard drive .

Upvotes: 0

Dr M L M J
Dr M L M J

Reputation: 2397

Try

  • Jpeg images instead of png

  • Save images with option "Save image for web"

  • You can use RIOT image optimisation tool

  • For reducing load time you can use CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often used for mouse-over states on buttons. E.g. with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over the image.

  • Do not use an Image at all. we can generate rounded rectangles, gradients, drop shadows, and transparent images using CSS

Upvotes: 0

Related Questions