Question

I have a JavaScript slideshow that pre-loads images out of a MySQL database and then displays them one at a time in an image tag in the HTML document. Briefly, it accomplishes this by pre-loading images like many slideshow tutorials show on the web, but instead of using static images (i.e. images/image1.jpg etc.) it uses a dynamic image provided via PHP (i.e. getData.php?n=1) The getData.php script runs on the server and opens a new connection to the database for every image that is preloaded.

Is there anyway to avoid making so many connections to the database and having each connection make only a single query on the image database with LIMIT n,1?

It seems that if I am going to use getData.php as the image.src then getData.php needs to return a single image at a time! I’d really like to fetch them in blocks of 10 and then assign them to Image() objects one by one on the client side. I think this would be faster because when I wrote a client app in python to display the images (outside the browser of course) blocks of 10 or so transferred much faster (and reduces the load on the mySQL server). Can I accomplish this with JavaScript and PHP? Do I use XML in between? If I could get binary image data into JavaScript with AJAX could I do anything with it? Is there an imagecreatefromstring() function in JavaScript that I’m missing?

I can figure out exact code on my own, but I’m new to web programming and need a tip about how to tackle this problem! I think I’m missing some piece of major framework. Do I need ActionScript or something other than JavaScript for this problem? Thanks for the tip in advance!

EDIT: I like this first suggestion and I think I could get that done. It will also enable me too follow part of alex shishkin’s suggestion to avoid LIMIT n,1 queries (I do want to keep the SQL BLOB fields though) But how do I stick binary data from XML into an Image() object in JavaScript ?

Answer 1

I would say:

• Have the getData.php generate an XML file that contains the next 10 images.
• Have javascript to get the XML response from an AJAX-Request to getData.php.
• Traverse the images in the XML response one by one and when the ninth images is displayed query the getData.php for the next set of images.

As for a framework: My advice is to use JQuery for both the AJAX request and the image display and preloading.

---

You can use a binary-to-text encoding like base64 to pass the binary data through XML. In most browsers you can use the base64 decode by itself and pass it to an image object like so:

<img src='data:image/jpeg;base64,your binary data comes here'> 

This will work in all but Internet Explorer, you can use a neat trick by Dean Edwards to pass the base64 data back to a PHP module for IE 🙂

Using JQuery and PHP for a simple image (no slideshows… this was just my test-code) the code looks something like this:

PHP:

<?php    echo base64_encode(file_get_contents('image.jpg')); ?> 

JS / JQuery:

$(document).ready( function() {    $.get( 'image.php', function( data ) {       $(document).append('<img src=\'data:image/jpeg;base64,'+ data +'\'>');    }); });