How to implement this image preloader into my php file?

Question

I want to have my images which are processed via ajax to be preloaded visually rather then the usual loading of images where you see them build up from top to bottom. Please take a look here . What you see there is what I want to have in my php file visually.

The part where the pictures are loaded from the database are the following:

$sql = "SELECT * FROM `fabric`".$filter;
$result=mysql_query("$sql");

//echo $sql;

$data = "";
$ii = 0;
$m = 0;

while($myrow = mysql_fetch_array($result)){
    $ii++;
    $m++;
    if ($m == 1) $data = $data."<div class=\"page current\">";
    elseif ($ii == 1) $data = $data."<div class=\"page\">";

    $data = $data."<a href=\"#\" title=\"".$myrow['name']."\" class=\"show_fabric\" rel=\"".$myrow['id']."\"><img src=\"".$image_directory.$myrow['thumbnail']."\" width=\"100 px\" height=\"100 px\"><div class=\"fb_name\">".$myrow['name']."</div></a>\n";
    if ($ii == 10) {


    $data = $data."</div>";
        $ii = 0;
    }
}
    if ($ii != 10) {
        $data = $data."</div>";
    }

if (empty($data)) echo "No result";
else echo $data;
?>

I really don't know how to change the php in order to have the effect shown in the demo. Thank you for all constructive advices and forgive my noobiness :)

Answer 1

You will need javascript for this, you can´t do it in php alone. The basic idea is to hide your images using for example a visibility: hidden and have them fade in when they are completely loaded. And at load-time you position a loading image on top that you remove when you start fading in the image.

As the example you've given, is a plugin, perhaps you can even use that one instead of writing it yourself.