Php / Ajax - Best Practice for Image Preloading

Question

I put together a script that is very similar to the flreamr photostream function. Two thumbnails are next to each other, and when you click the next or previous link, it includes the following (or previous) two images. Cool!

Currently, when loading a page, two images are loaded. When using nxt / prv for the first time, the next two images or the previous two are uploaded via ajax, with the identifier of the first image being passed to url and HTML for two new images returned and displayed via ajax.

simple enough, but it made me think, a slow connection or a heavy server load, and then two images, although relatively small thumbnails may still take some time to load, and nice things with sliding panels are the fact that hidden data glides quickly and smoothly, without delayed downloads.

So, I was interested to know which option is best suited for performance and good practice, this time I can think by opening sentences.

1, call each set of images via JSON (is it supposed to be fast?)

2, load all possible images into a json file and pull the details in that direction - although the browser will still have to load the image. Plus sometimes there can be 4 images, in other cases there can be up to 1000!

3, Upload 10 images via php to Json or another file and upload all 10 images to the browser, hiding 8 that are not displayed, and always show the middle. The problem here is that every time someone clicks, the file must reload the first and last images, which still takes a lot of time, although I believe that medium images will be cached via the browser. But still there is boot time.

4, is it possible to have a json image with all the details of the image (regardless of the number) and use 3 to load 10 of these images, is it possible to use ajax to read 10 lines only and save the pointer from the last one that it read, so the json file can upload fast, short updates and images on both sides are cached via the browser.

Hope it is clear, any suggestions on how you handle this?

Answer 1

To preload an image from Javascript, you do not need to do anything similar to AJAX or JSON. All you need is:

var img = new Image(); img.src = "http://example.com/new/image.jpg"; 

The browser will quite happily load the image in the background, even if it is not displayed anywhere. Then, when you update the src field of another (displayed) image tag, the browser will immediately show part of the downloaded image (I hope all this).

Answer 2

Getting JSON through Ajax will just slow you down.

You better use inline JSON and generate Javascript.

  <?php $images = array( "foo.jpg","bar.jpg" ); ?> <script type="text/javascript"> jQuery(function($){ var images = ( <?php echo json_encode($images); ?> ); /* Creating A Hidden box to preload the images into */ var imgbox = document.createElement("div"); $(imgbox).css({display: 'none'}); /* Possible Alternative trick */ /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */ $('body').append(imgbox); $.each( images , function( ind, item ) { #Injecting images into the bottom hidden div. var img = document.createElement("img"); $(img).src("/some/prefix/" + item ); $(imgbox).append(img); }); }); </script> 

Answer 3

In case you want to load more resources in parallel , a small ajax can solve the problem for you. Just make sure the caching headers are such that the browser will use resources for the next request. In the following example, I load up to four resources at a time.

 <script> var urls = [ "a.png", "b.png", "c.png", "d.png", "e.png", "f.png" ]; var currentStep = 0; function loadResources() { if(currentStep<urls.length){ var url = urls[currentStep]; var req = GetXmlHttpObject(); update('loading ' + url); req.open("GET", url, true); req.onreadystatechange = getUpdateState(req, url); req.send(null); } else { window.location = 'done.htm'; } } function getUpdateState(req, url) { return function() { var state = req.readyState; if (state != 4) { return; } req = null; setTimeout('loadResources()', 0); } } </script> <!-- This will queue up to four concurrent requests. Modern browsers will request up to eight images at time --> <body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();"> 

Answer 4

Why not use text and replace text with image code (working in php is very nice with ajax up to 500 images, etc.)?