Question

My web page initially populated around 1000 thumbnails by dynamically creating images in javascript. Due to permission issues, I migrated to suPHP. Now instead of using the standard <img> tags as such

<img src="/foo/bar.jpg" alt="Foo Bar"/>

I am retrieving via this php script

$file = fread($handle, filesize($filename));

$a = array(
    'type' => 'image/jpeg;base64',
    'image' => base64_encode($file)
);

echo json_encode($a);

And then creating the image like so (inside the xmlhttprequest call back, where image has been created already)

image.src = 'data:' + data['type'] + ',' + data['image'];

It work, but I can only reliably load half the pictures. If I try to load all of them, chrome crashes. I don’t think this is performance related as the pictures load very quickly. Any ideas why this is happening?

Answer 1

If you can call a PHP script to generate base64_encoded images, then you should(?) be able to let the browser load your images from a PHP script and skip JSON / AJAX altogether.

<?php
header('Content-Type: image/png'); // Change MIME type for different images (JPEG / GIF)
// Probably need Content-Length header in here too
header('Content-Length: ' . filesize( $filename));

echo file_get_contents( $filename);
exit;
?>

Then use something like this (I used image_id to determine which image to load, you must have something similar):

<img src="/load_image.php?image_id=1234" alt="" />