Question

I have a big database to get dynamically images from Ajax response.
How could i make it lightning fast

images is in comma separated form such as

img4.jpg, img3.jpg, img5.jpg, img7.jpg,img11.jpg, img1.jpg, img2.jpg, img3.jpg, img6.jpg, img8.jpg

my code for php.

function childImgsGrid(){

        $parentImgId = $_POST['parentImgId'];

        $query = mysql_query("select child_imgs_id,child_imgs from parent where parent_img_id = $parentImgId") 
                or die(mysql_error());

        $result = mysql_fetch_array($query);
        $arrayOfImages = explode(",", $result['child_imgs']);
        $i=1;
        foreach($arrayOfImages as $nameOfImage){

            echo "<li><a href='#lookbook' ><div class='view'><img src='images/slide/".$nameOfImage."'></a></li>";

        }
    }

and for Ajax

var parentImgId = $anchor.attr("id");

                var dataString = 'queryString=childImgsGrid'+'&parentImgId='+parentImgId; 

                var arrayOfImages = new Array();

                $glob.ajax({
                    type: "POST",
                    url: "ajaxtemplate.php",
                    data: dataString,                   
                    cache: false,
                    success: function(response) {
                        $glob('#grid').html(response);
                    }
                });

Answer 1

This is very broad topic in general but I’ll attempt to throw some light on the matter.

1. Optimized versions of Images

   Like Facebook, when images are added you can use a background job to create a low-quality version of the image. When the image is requested, this low-quality image is show while the original high quality image is loaded in the background. Once done loading, just replace.

2. Pre-loading

   If you know or have an idea of what images will need to be shown (common case in galleries to pre-load the next 2 or 3 images) you can fetch them without user input. So when a user opens image #443 you load it along with #444, #445 in the background.

3. Using in-memory stores

   If the database records are very large, and presuming you are saving images in the filesystem not as blobs in the DB, and the retrival is based on a unique key (primary or otherwise) you can implement something like memcache or redis so that the quering is very fast.

4. Node.js

   If the number of requests for images is becoming very high, think about using an asynchronous server response architecture like node.js.

The particular use-case as well as technologies will change the implementation of each of the above but the overall concepts should be solid.