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