Use ajax to create a cacheing system
Cache Pic
As I said in my last post, I wanted from the first time to make a cacheing system for my imageroll page. Because i take the images from vi.sualize.us servers and we don’t want to make to much trafic and make stuff worse for them.
So what i did is simple, i made a class that extracts the rss data from theirs servers and get the images to display them. I do this every time someone visits the page. If any image is new for the first time we display the image from vi.sualize.us and run a functions in javascript to check for new images. If any new images exist then we cache them in a folder on our server and the next time a user visits the page that image will be shown from our server. Pretty simple.
For now i’ll just show you the stuff that makes this thing run and if you want i can share the whole script so that you can make one for your blog or website.
I’ll also try to make a WordPress plugin so you can integrate it easily in your blog.
So here we go. We start with the function that checks for new images:
functio checkCache($image_url){
$path=pathinfo($image_url);
$img_cached = 'cache/'.$path['filename'].'.'.$path['extension'];
if(!file_exists($img_cached)) {
createCacheImg($image_url);
}
}
This function just checks if the image exists in the “cache” folder. If it’s not there then we run the “createCacheImg” function.
We now need a function to get the image so we check if the image is in the cache folder or not so we know what to display.
function getImage($or_img) {
$path=pathinfo($or_img);
$filename=$path['filename'];
$img_cached = 'cache/'.$filename.'.'.$path['extension'];
if(file_exists($img_cached)) {
$url=$img_cached;
}else {
$url=$or_img;
}
return $url;
}
Very simple function that just returns the right url of the image.
Now we cache the image.
function createCacheImg($image){
$srcsize = getimagesize($image);
$w = $srcsize[0];
$h = $srcsize[1];
$path=pathinfo($image);
$dest='cache/'.$path['filename'].'.'.$path['extension'];
if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
$src_img = imagecreatefromjpeg($image);
}else if($path['extension']=='gif') {
$src_img = imagecreatefromgif($image);
}else if($path['extension']=='png') {
$src_img = imagecreatefrompng($image);
}
$img_cpy=imagecreatetruecolor($w,$h);
imagecopy($img_cpy, $src_img, 0, 0, 0, 0, $w, $h);
if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
imagejpeg($img_cpy,$dest);
}else if($path['extension']=='gif') {
imagegif($img_cpy,$dest);
}else if($path['extension']=='png') {
imagepng($img_cpy,$dest);
}
imagedestroy($src_img);
}
This function will save the image into the cache folder. Now we need a new file “checkcache.php” where we put this code:
include('functions.php');
$image=$_GET['image'];
checkCache($image);
Right now we should have this kind of structure in our imageroll folder: A folder “cache” a file “functions.php” where we place all these functions we just did and a file “index.php” where we run the javascript function and display the images.
The “index.php” file requires this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Image ROLL
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
</head>
<body>
<input type="hidden" id="image" value="http://test.com/image.jpg">
<img src="<?=getImage($image)?>" alt="test image"/>
</body>
</html>
We have here a simple index.php file that imports the google api and jquery so we can run a simple ajax function. This is the javascript code that you should insert in this file or a separate one if you want:
$(document).ready(function() {
checkCache();
});
function checkCache(){
var page=$('#image');
var url='checkcache.php';
var pars='page='+page.val();
$.get(url,pars);
}
This will run this function after the page loads and it will check for new images. So this is just a simple script that will make you pages load faster expecialy if you load the images from outside of your server.
If you liked this i’ll go and make a more complex one and even share the imageroll script i did. That until i find the time and make a WordPress Plugin.
About The Author
Wow nice layout