Location: PHPKode > scripts > PreLoad Images > class.preloadimages.php
<?php
/******************** CLASS TO PRELOAD IMAGES *******************************************
 * Class to Preload Images.
 * This class read all image files in the server directory 'dbimages'
 * create a database for the images  
 * insert the location string of the images into a table of the database
 * preload all image files into the client browser cache with a javascript. 
 * when the first page 'index.php' will be loaded, the images will be ready to view, 
 * end you will not wait the image loading in the second page 'viewimages.php'.
 * All images you will insert in the server directory 'dbimages' will be autopreloaded 
 * into the cache browser when the first page index.php is loaded.        
 * @author Riccardo Castagna
 ***************************************************************************************/
class PreLoadImages{

  var $dbHost;
  var $dbUser;
  var $dbPass;
  var $dbName;

  function connessioneDb(){
  $connect;
  $db;
  $crea;
    {
    $this->connect = MYSQL_CONNECT($this->dbHost, $this->dbUser, $this->dbPass) or die ("Error");
    $this->crea = MYSQL_QUERY("CREATE DATABASE IF NOT EXISTS ".$this->dbName." ;");
    $this->db = MYSQL_SELECT_DB($this->dbName, $this->connect) or die ("Error ".$this->dbName."");
    }
  }
  
  
  
  // this is the doctype   
  function xhtmlpage(){
  $s1 = "<";
  $s2 = "?";
  $s3 = ">";  
  $this->page = "".$s1."".$s2." xml version=\"1.0\" encoding=\"iso-8859-1\" ".$s2."".$s3."
  <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">
  <!-- saved from url=(0014)about:internet -->
  <html xmlns=\"http://www.w3.org/1999/xhtml\" version=\"-//W3C//DTD XHTML 1.1//EN\" xml:lang=\"en\">
  <head>
  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
  <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\" />";
  $this->closehead = "</head><body>";
  $this->closehtml = "</body></html>";
  }
  
  
  
   // this is the main function     
  function imagepreload(){
   // first of all read all image files in the directory
  if ($handle = opendir('dbimages/')) {    
      $p = null;
      $q = null;    
        while (false !== ($file = readdir($handle))) {
            if ($file != "Thumbs.db")//this to avoid to read this kind of file "Thumbs.db" , sometime it could be generated if you are under window server
        {
            $q .=",('".$file."')"; // create the string for the mysql query insert
            $p .=",/*url*/\"dbimages/".$file."\""; // create the string for the javascript (preload images)
        }
        }
    
      $this->newq = str_replace(",('.'),('..'),", "", $q); 
      // $this->newq is the string cleaned ready for the query to insert multiple data into db
      // is another way to insert multiple data into database istead of using a loop, this may be faster     
      $this->preimg = str_replace(",/*url*/\"dbimages/.\",/*url*/\"dbimages/..\",", "", $p);
      // $this->preimg is the string cleaned to insert into the javascript this to preload images
      // when you open this page the images will be ready into the cache of the client browser
      closedir($handle);
      }
  // this is the javascript to preload images (by microsoft)
  // and the PHP write the javascript function  " preloadImgs(".$this->preimg."); "
   $this->javascript = "<script type=\"text/javascript\">
    function preloadImgs() {//v1.0
     var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
     for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
    };
    preloadImgs(".$this->preimg.");
    </script>";
   
  // create the table with two field idimage int(2) and images varchar(30)
   $sql = "CREATE TABLE IF NOT EXISTS dbimages (
   idimage int(2) NOT NULL auto_increment,
   images varchar(30) NOT NULL,
   PRIMARY KEY (idimage)) 
   ENGINE=InnoDB DEFAULT CHARSET=latin1;";
   
   $exesql = mysql_query($sql);
   //now I insert multiple data without a loop with the string $this->newq this to avoid 
   //to call the query more times with a while loop (this do not stress the database and may be faster, 
   //I prefer to stress Apache) 
   $insmoreimages = "INSERT INTO dbimages (images) VALUES ".$this->newq.";";   
   $insert = mysql_query($insmoreimages);  
  }
  
  
  
  
  function firstpage(){
  $this->xhtmlpage();  
  echo "".$this->page."<title>First Page Images Preload</title>".$this->javascript."".$this->closehead."
  <div style=\"text-align:center; margin-left:auto; margin-right:auto; background-color:#C0C0C0; width:350px; height:350px; margin-top:30px; border:3px dotted #C86307; \">
       <p>when this page is loaded all images will be into the browser cache ready to view for the second page</p>
       <p>if you are working in localhost you will not note the difference in performace</p> 
       <p>to have the image ready into the cache browser is useful to avoid the images will load after the page is loaded</p>
     <a href=\"viewimages.php\" >view images in the second page</a>
  </div>  
  ".$this->closehtml."
  ";
  }
  
  
  
  
  function secondpage(){
  $mysql = "SELECT * FROM dbimages";
  $queimg = mysql_query($mysql);
  $this->xhtmlpage();  
  echo "".$this->page."<title>Second Page Images View</title>".$this->closehead."
  <div style=\"text-align:center; margin-left:auto; margin-right:auto; width:700px; background-color:#C0C0C0; margin-top:30px; border:3px dotted #C86307; \">
     <a href=\"index.php\" >go back to the first page</a>
          <table style=\"text-align:center; margin-left:auto; margin-right:auto; \" >";                                                                                                                                                      
              while ($img = mysql_fetch_array($queimg))
              {
              $image = "dbimages/".$img['images']."";
              echo "
            <tr>
              <td  style=\"text-align:center;\" >
                 <img src=\"$image\" style=\"border:2px solid #FFF; width:624px; height:474px; margin-left:auto; margin-right:auto;\" alt=\"".$img['images']."\" />
              </td>
           </tr>";
             }
  echo "</table>
 </div>     
  ".$this->closehtml."";
  }
  
  
  
  
    // in the file viewimages.php at the end I destroy the database 
    // if do you prefer to keep it, open the file 'viewimages.php'
    // and delete the row number 11 or add before $ref->destroydb(); the double slash   
    function destroydb(){
     $sql2="DROP DATABASE ".$this->dbName.";";
     $exesql2 = mysql_query($sql2);
    }
    
    
      
}// close the class     
?>
Return current item: PreLoad Images