0

Im working on a site with multiple div containers. All of them have one common class, called qcnt, defining their structure, general looks and position.

They each have also assigned a different class, one of about 100, to give each of them one image of about 100 respective sets of about 4 images as the background-image. These sets are currently organized in folders for each class. The CSS for each class currently references a file called random.php, which i found on the web that automatically returns one of the images in their respective folder randomly.

I figured that this is a very performance-intensive task to let the server run for 25 to 100 or more containers per page visit.

I'd like to know what approach would be more reasonable and effective in this scenario. Thanks in advance!

I could post the random.php code here, but i'll guess that my general structure is an ineffective approach from the ground up.

EDIT: Okay, i did not realize this, here is the code:

<?php
$folder = '.';

$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';


$img = null;

if (substr($folder,-1) != '/') {
    $folder = $folder.'/';
}

if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
    file_exists( $folder.$imageInfo['basename'] )
) {
    $img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
    $file_info = pathinfo($file);
    if (
        isset( $extList[ strtolower( $file_info['extension'] ) ] )
    ) {
        $fileList[] = $file;
    }
}
closedir($handle);

if (count($fileList) > 0) {
    $imageNumber = time() % count($fileList);
    $img = $folder.$fileList[$imageNumber];
}
}

if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
    header ("Content-type: image/png");
    $im = @imagecreate (100, 100)
        or die ("Cannot initialize new GD image stream");
    $background_color = imagecolorallocate ($im, 255, 255, 255);
    $text_color = imagecolorallocate ($im, 0,0,0);
    imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
    imagepng ($im);
    imagedestroy($im);
}
}

?>
JKunstwald
  • 560
  • 1
  • 3
  • 14
  • 1
    Without posting some code you're likely to get DV'd and closed very quickly as this is a very broad question. – Jay Blanchard May 20 '14 at 16:56
  • 1
    Yep, post your HTML and PHP. It's hard to follow as-is. – Paul Dessert May 20 '14 at 16:57
  • 1
    you're probably running that `random` script for EVERY image in your gallery. 100 pictures = 100 random scripts = 100 http requests. you'd be better off running the script **ONCE** and get a list of 100 random files, then send that over to the client in ONE response. – Marc B May 20 '14 at 16:58
  • Or reference all 100 images with their own class such as `random1, random2` etc and then only randomise the class for each of the containers on initial page load. – Rob Schmuecker May 20 '14 at 17:01
  • @MarcB That sounds exactly like a reasonable approach. My only problem would be how to implement that. The site that im working on can be found here: http://smitesteal.net/ – JKunstwald May 20 '14 at 17:01
  • its better to insert the images to DB(do it in the upload form for example) than query 20 random rows its gonna be a lot more faster – Amir Bar May 20 '14 at 17:03
  • @amirbar This is what i thought up so far too. It would however require countless classes, or maybe an assembly of the background-image attribute itself via php. – JKunstwald May 20 '14 at 17:07

1 Answers1

0

First, add an http cache expiration to your random.php: How to use HTTP cache headers with PHP

You don't need a lot, anything from 1 minute to half an hour should be a good balance depending on your exact needs (lower cache = less performance but quicker to update if you make changes).

Second, add a random variable from 1-100 to your CSS like so:

random.php?b=13
random.php?b=79
random.php?b=27
random.php?b=1
...

The random variable will ensure that even though you're caching random.php, each container will still get a random image. But because you've added caching and are restricting the variable to 1-100, the max number of calls you'll see on average is 100 / cache time regardless of your site load.

Community
  • 1
  • 1
Dan Smolinske
  • 319
  • 3
  • 7
  • Do you assume that there is only one random.php file? Because right now, there are ~100 random.php files in the ~100 folders. Caching one of those would simply let their container display constantly the same image (not rerolling upon each reload) for the cache time, right? Since im working on an infinite scroll type site, this would probably be the case anyway, and my biggest concern is the initial load performance, since it has to run this file so often. – JKunstwald May 20 '14 at 17:54