how browsers act when downloading images called from ajax?

Question

I'm new in this topic, so my apologies for this question :) I need to create a page that must show all images uploaded in a post, one at time. When the user click next button, the it must load the next picture, replacing the first one.

< [ image1 ] > 
  Title
  Description
  other content

--> User clicks next

< [ image2 ] > 
  Title
  Description
  other content

However, in order to speed the image display load, the two following images need to be downloaded in hidden panels, so the images will be cached when user clicks next and load the next bundle of images.

If I use ajax to do this task, will the browser use the downloaded images or ajax will download them once again?

Is there a way to do this process more optimal?

Thank you very much!

I think you have the right idea. When the user clicks next, just have the browser display the hidden panels using javascript and fire off an ajax call to retrieve the following images and add it to a hidden panel. This SO question may help [link](http://stackoverflow.com/questions/7074685/how-to-add-image-to-show-hide-div-javascript) — ssn771, Mar 16 '13 at 22:42

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

You can download the next image's data to strings using ajax and convert it to a base64 string and embed it in the html (when the next button is clicked, using javascript) by changing the src atribute of your image to "data:image/png;base64,(base64stringhere)" replacing (base64stringhere) with the downloaded base64 string of an image

ref: http://www.techerator.com/2011/12/how-to-embed-images-directly-into-your-html/

ref: How can you encode a string to Base64 in JavaScript?

Note: most browsers cache images, so it will waste quite a bit of bandwidth if the users are viewing images they already have downloaded.

edited May 23 '17 at 12:21

Community

1
1

answered Mar 16 '13 at 22:42

Downloading the images this way is faster than using Ajax? – Arturo Suarez Mar 16 '13 at 22:52
This uses ajax to download them, it simply just downloads the next image(s) in the background, and changes them as soon as the user hits the next button – Mar 16 '13 at 22:58
but if I create an Ajax function to download the images, will the browser ignore the download function if the image is in cache? – Arturo Suarez Mar 16 '13 at 23:14
Yes, it looks like most browsers cache ajax responces (for static mimes) – Mar 16 '13 at 23:17

how browsers act when downloading images called from ajax?

1 Answers1