What is the best way to load a set of pictures to be shown later

Question

I have a callback from an ajax call that returns a bunch of image links. I store this array in a variable (called fullPeopleList) and then on the click of a link, i show all of the images in the DOM. something like this:

function ShowAllPeople() {
var html = [];
$.each(fullPeopleList, function (i, person) {
    html.push("<img title='" + person.Name + "' height='45' width='45' src='" + person.SafePicLink + "' /> ");
});
html.push("&nbsp; <a id='showTop' href=''>Show Less ...");

$("#people").html(html.join(""));

}

the issue is that when i click on the list to show all of the people it takes a while to actually load all of the pictures so it shows the ugly browser empty placeholder box for each image until the images each load one by one

Is there anyway i can load these images in the background when i get the initial list so when i click on the "Show" link they are show up quickly ?

possible duplicate of [Preload images using jquery](http://stackoverflow.com/questions/4506825/preload-images-using-jquery) — mauris, Dec 30 '11 at 02:16
@qwertymk: [@leora's profile](http://stackoverflow.com/users/4653/leora?tab=questions) — , Dec 30 '11 at 02:43

score 1 · Accepted Answer · answered Dec 30 '11 at 02:16

How about wrapping the area they shown in in a div then visibility: hidden initially then use the link to change it to visibilty: visible it? (preferably thropugh add/removing a class). Using hidden means the space still gets taken up as opposed to none which would not do that. You would still need to create areas of the right size though as you can't reserve space if you don't know about the image size (yet).

score 0 · Answer 2 · answered Dec 30 '11 at 02:19

0

Why not just do the DOM manipulation you're doing now when the image links are initially obtained? Just pop them into a hidden element until the user decides to view them all, at which point ShowAllPeople() would simply make the element visible.

answered Dec 30 '11 at 02:19

ranksrejoined

1,229
9
9

score 0 · Answer 3 · edited May 23 '17 at 10:34

I believe that the "classic" method is to us abs positioning to "display" the image outside the viewport. Eg at -10000 0 location.

You can also use an img elements "onload" event. See SO Q

You should also investigate to ensure that there is no slowdown from your image server. I recommend that you store the images on Amazon S3. I do and they are both very fast and very cheap.

Finally, you should re-examine your User Experience. Eg show some animations while the images are loading. Or display the images using a gallery or carousel. The advantage is that if the user will only see one or two images at a time, it will seem faster. -- Since you can then be pre-loading the additional images in the background until the user (later) presses the Next button.

What is the best way to load a set of pictures to be shown later

3 Answers3