ansaurus

Question

How to sequentially load images from an AJAX call [Web Development] ?

Answer 1

+1 A:

Maybe sift through the source of this for some idea: http://www.appelsiini.net/projects/lazyload I wouldn't actually use that plugin, as it seems to lack callbacks, has a weird omission within its documentation:

You can workaround this with

But surely there's something to be learned from it :)

karim79 2010-08-31 23:47:21

@karim79, I'm not describing lazy-loading. I've updated my original post to make it more clear what I'm attempting to accomplish.

JimmyL 2010-09-01 00:01:36

@karim79, did my description of my need for "sequential" loading help in my updated original post?

JimmyL 2010-09-01 00:49:32

Answer 2

A:

Seems similar to this post: http://stackoverflow.com/questions/444730/javascript-lazy-load-images-in-horizontal-div

Have you seen this page: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/

It shows a jQuery plugin for doing it http://www.appelsiini.net/projects/lazyload

Daveo 2010-08-31 23:52:50

@Daveo, I'm not describing lazy-loading. I've updated my original post to make it more clear what I'm attempting to accomplish.

JimmyL 2010-09-01 00:01:13

Answer 3

A:

If you use Javascript to download the images into an array of Image objects then that should work. If you have a method you can safely use to sequentially download the images into that array, then you can store the current position of the array and display the next 4 (or however many) in the box.

var img_array = new Array
for (i=0;i<num_images;i++) {
    var img = new Image();
    img.src = "image"+i+"jpg";
    img_array[i] = img;
}

Then you can just load the image sources (using img.src like above) into the src attribute of an image tag. This method is used for preloading images in alot of javascript libraries.

However, I do advise against forcing users to download 1000's of pictures when they may not even view them. Try downloading the next four in the sequence from where you are currently displaying.

Aatch 2010-09-01 00:14:15

@Aatch, I'm not sure that will work. I've updated my original post to add more info. See UPDATE 2

JimmyL 2010-09-01 00:36:21

Answer 4

A:

Given that you receive the HTML fragment in a similar manner to this, I think you can remove all of the src attribute, then add them back one by one as the previous images load, something like:

$.ajax({
  source: 'somewhere/over/the/rainbow',
  // ... other options
  success: function(data){

    var images = $('body').find('img').each(function(){
      $.data(this, 'source', this.src);
      this.src = '';
    });

    images.appendTo('body');

    seqLoad(images.children('img:first'));
    seqLoad(images.children('img:eq(2)'));
  }
});

Where seqLoad() would be a function like this:

function seqLoad(element){
  element.attr('src', $.data(element, 'source'));

  element.load(function(){
    seqLoad(element.next().next());
  });
}

Basically the idea is to grab the src of each img, store it, then add it back to the img tags one by one as they load. Of course there are several problems with this, like say if one of them never loads (this can be fixed with a timeout that 'skips' the image in question if loading takes too long). Two instances are started, because, as far as I can remember, most browsers can load things from the same domain only two at a time.

Just don't go and plonk this code into your site... I don't have time to set up a proper test environment, so this thing's probably riddled with bugs. Take the idea and go write your own. Any suggestions on improvements are welcome.

Yi Jiang 2010-09-01 02:18:47

Answer 5

A:

Doesn't appear this is answered correct yet. I too am looking for an answer to this question.

Henry 2010-09-02 19:15:53

ansaurus

tags:

views:

answers:

How to sequentially load images from an AJAX call [Web Development] ?

Question:

related questions