How could I cache images that I'm pulling from a magento database through ajax?

Question

Here's script being called through ajax:

<?php

require_once '../app/Mage.php';
umask(0);

/* not Mage::run(); */
Mage::app('default');

$cat_id = ($_POST['cat_id']) ? $_POST['cat_id'] : NULL;

try { 

    $category = new Mage_Catalog_Model_Category();
    $category->load($cat_id);

    $collection = $category->getProductCollection();

    $output = '<ul>';

    foreach ($collection as $product) {

    $cProduct = Mage::getModel('catalog/product');
    $cProduct->load($product->getId());

        $output .= '<li><img id="'.$product->getId().'" src="' . (string)Mage::helper('catalog/image')->init($cProduct, 'small_image')->resize(75) . '" class="thumb" /></li>';
    }

    $output .= '</ul>';

    echo $output;

} catch (Exception $e) {

    echo 'Caught exception: ', $e->getMessage(), "\n";
}

I'm just passing in the Category ID, which I've tacked onto the navigation links, then doing some work to eventually just pass back all product images in that category.

I'm using this on a drag and drop build-a-bracelet type of application, and the amount of images returned is sometimes in the 500s. So it get's pretty held up during transmission, sometimes 10 seconds or so.

I know I'd do good by caching them some way, just not sure how to go about it. Any help is much appreciated.

Thanks.

-Wes

Answer 1

From the looks of your code, you're probably already "caching" the chosen size of the image. That is, Magento doesn't have to invoke GD to resize the image on the fly.

However, the 500 images still have to be requested from Apache, which is going to be a complete pain the first time no matter what you do. Make sure that Apache is configured to allow browser-size caching of media such as those JPGs for a pretty long period of time and you shouldn't have to re-download the images on every page load.

Aside from that, you may want to devise a strategy to use fewer images and request more only as they are needed. It's unlikely that a user can really focus on 500 images in any meaningful way.

Hope that helps!

Thanks, Joe