Fastest way to get the Ajax callbacks - php

Question

I have a table called 'items' which has 10 rows. This 'items' table contain 2 columns(id, item_name). item_name is where I store the images' names such as item_fdsj43.jpg, item_bdf34.jpg, and so on...
If I want to displayed all these images, I do something like this:
fetching.php:
$query = "SELECT item_name FROM items";
$mysql_query = mysql_query($query);
while($mysql_fetch_assoc = mysql_fetch_assoc($mysql_query)){
$mysql_fetch_assoc_item_name = $mysql_fetch_assoc['item_name'];
echo 'img/'.$mysql_fetch_assoc_item_name;
}
JAVASCRIPT
$('fetching.php', function(data)){
$('#inner_container').append(data);
});
This will display all the data simultaneously and append it on '#inner_container' once the fetching is done. However, this callbacks takes a while and slower compare to search engine of this website (http://www.bedbathstore.com/). Is there any way to boost its speed?

Answer 1

Here i can suggest to you JSON instead of output data using echo below are the sample code
you can modify it for your needs
PHP code
ob_start();
imagepng($my_img);
$imageData = ob_get_contents();
ob_clean();
$results = array(
'price' => $_GET['priceX'],
'image' => base64_encode($imageData)
);
$json = json_encode($results);
echo $json;
Javascript code:
$.getJSON("/ajax-script.php", function(data) {
$("#element").append($("<img />").attr('src', 'data:image/png;charset=utf8;base64,' + data.image));
});

Answer 2

You can use json to retrieve the image paths at once from the server asynchronously and then you can append these images to image container like this,
//fetching.php:
$query = "SELECT item_name FROM items";
$mysql_query = mysql_query($query);
$file_names = array();
while($mysql_fetch_assoc = mysql_fetch_assoc($mysql_query)){
$mysql_fetch_assoc_item_name = $mysql_fetch_assoc['item_name'];
array_push($file_names, 'img/'.$mysql_fetch_assoc_item_name);
}
echo json_encode($file_names);
//JAVASCRIPT
$.getJSON("fetching.php", function(data) {
$.each(data, function() {
$('#inner_container').append($("<img />").attr('src', this);
});
});