Caching dynamic images loaded via PHP/AJAX/JSON/jQuery

Question

I'll try to be as thorough as possible here.

The application that I am working on enables administrators to create folders, and then upload photos into that folder. The display is similar to that of Pinterest, where it loads all of the photos in a collage on one screen. It works perfect when you only have 5 - 6 photos in there, but that is rarely going to be the case. Once you start getting a lot more photos in there, it starts becoming more slow. The other thing is, whenever you delete a picture, or re-enter that folder, the entire display has to reload. I need some way of caching these images.

Here is the logic of my script:

On dashboard.php, there are two javascript includes: homepageActions.js and fileManager.js. homepageActions.js has a document.ready() script, that calls a javascript function, showFiles().

So basically, to be a bit more concise, as soon as the document loads, the function showFiles() gets called. That function looks like this:

function showFiles(directoryName) {
  $.ajax({
    url: 'displayRecords.php',
    type: 'post',
    data: ({directoryName:directoryName}),
    dataType: 'json',
    success: function(data) {
        constructTable(data);
        $(document).find("a[rel*='lightbox']").lightBox();
    }
  });
}

This function has a folder path passed into it. From there, the AJAX script calls a PHP script which looks in that folder, and gets a list of all of the directories and images in that folder. It then constructs a JSON string which contains the details of each subfolder and image inside the folder that was originally passed in. Once that script successfully returns, another function, constructTable(data) is called, which passes in the JSON string to the function.

Here is where things start to get a little hairy.

The constructTable() function has about 240 lines of code in it, which I won't include here, because it gets hard to follow. To summarize, this function parses the JSON string, figures out which entries are directories and which entries are files. It creates two arrays from that: an array of folders, and an array of files.

First I process all of the folders, and display them accordingly. This part is fine, and I have no concerns about.

After that however, I start going through the images. For each image, I am basically writing a lot of code around it. There are div's, links, and other HTML markup surrounding each image. But long story short, I have a for...next loop that looks at each file path (gathered from the JSON), and I construct a long string of HTML which I then use jQuery to append into a DIV. So it ultimate ends up looking something like this:

for (var a = 0; a < numPhotos; a++) {
   photoCode += "<div id='outside-container-"+a+"'>";
   photoCode += "<a rel='lightbox' class='photo-link' href='"++"'>";
   photoCode += "<img src='http://" + rootURL + "/uploads/"+fileNameArray[a] + "' width='200' class='photo-thumb'/></a>";
   photoCode += "</div>";

   $("#column1").append(photoCode);
}

Now - as I previously said, when there are only a couple of photos in the folder, this is no problem. However, when we start getting into higher numbers, it becomes a problem. So - with that being said, is there any way that I can store these photos into the browser cache, so that they load a lot more quickly after the initial load?

is the javascript proccess that becomes slow or the images load? — Rafael Verger
– Rafael Verger, Commented Mar 21, 2012 at 18:53
@ Rafael - I feel like it's the process that becomes slow. For example, when I click on a folder, to load the photo display, I have to watch the photos load one by one. The photos pop right in there, so it's not like I am watching a slow photo-load progression... but again, waiting for 100 photos to load, each one taking about a second each, is not desirable. I have considered going with a slightly different approach, and in my dashboard.php file, just creating a couple hundred empty image tags, and then populating the src attribute via js - but I'm not sure that's the best approach either. — John Hubler
– John Hubler, Commented Mar 21, 2012 at 20:29
I don't believe it is you javascript that becomes slow because your code it is not too heavy... check my answer — Rafael Verger
– Rafael Verger, Commented Mar 21, 2012 at 21:12

Rafael Verger · Accepted Answer · 2012-03-21 21:50:40Z

So.. this problem hasn't only one cause, let's to them :]

JavaScript block a page while a function is running: while a function is running, all the page stays blocked till it stop running. Generally it takes milliseconds and it is not perceptive by humans, but when you have a hard process inside a loop, it can take a few seconds and then it will be clearly visible.
Large images can take too long to load: as larger is a file, longer it takes to load; if you have like 100 images with 5MB of avarage size, it will take a looong time to load all of it (they don't load parallely).
Parallel's file load: browsers has a limit number for requests on each host (any.thing.com); So if you're trying to load 100 images in the same host (www.yourhost.com/images/#{imgname}) you will not able to load all of them in parallel, the browser will do the number of possible requests for one host and then queue all the others.

Ok, now you know some HTTP problems for pages with a lot of requests, let's go to the solutions :D

JavaScript block: this is not your case, but for solve this you should break the javascript synchronicity. How?
- Remove the loop;
- Build a function with the code inside your loop; this functions should receive a list and an index for the element;
- In your new function, you will only work with the element for the received index, and then, call the function again (like recursivity) increasing the index and using the setTimeout function (this will break the synchronicity)
Large images: solve it is easy; the essential for this solution is show the thumbs instead the real images. You can use the script suggested by @MichalPlško (phpThumb). In addition you should limit the number of images that you load, and load more on demand, like Pinterest do (paging with auto load).
Parallel file load: this should be your real problem; It is not too easy, but it's not the hell to solve :D You just need to create some subdomains and make them point to the correct location, like img01.yourdomain.com point to you images folder or something like this.

Michal · Accepted Answer · 2012-03-21 19:18:50Z

0

You could improve the caching behavior by using a script called phpThumb(). It generates thumbnail images on-the-fly and also handles caching of the images on the server and in the browser. From the project website:

Thumbnails can be cached for less server load. Mulitple sizes of any source image can be cached seperately. Thumbnails are automatically updated when (local) source image is modified

So if you think that your problems may be caused by things as thumbnail creation, picture caching and similar, give this a try. I have great results with this.

answered Mar 21, 2012 at 19:18

Michal

3,3524 gold badges33 silver badges51 bronze badges

Collectives™ on Stack Overflow

Caching dynamic images loaded via PHP/AJAX/JSON/jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related