How to sequentially load images from an AJAX call [Web Development]?_问答_开发者

I have a real estate application that display homes.

I use AJAX to populate a fixed height/width DIV "window" with home listings.

Many times, the DIV window can be populated with literally a 1,000 or so house listings.

Each house listing includes one picture of the property and each house listing is about 100px tall (each "row" is 100px tall).

Since my DIV height is only 400px tall, only 4 house listings (of the possible thousands) are visible without scrolling at any given time.

Question:

How can I load the images in the order in which I have them listed in the DIV window. That way, the visible house images are downloaded first, and then all of the non-visible images (without scrolling) are downloaded later in the background?

UPDATE:

Note, I am not describing lazy-loading the images. What I want to do is load the images sequentiality in the same order as I have them listing in my DIV window, starting at the top and then working down. That way, the visible images gets loaded first but still continues the download of the non-visible images without the users having to initiate the download by scrolling.

UPDATE 2

In case it helps, I have the pseudo-code below of what I'm talking about:

<html>
<script>
var allHomesJSON = ajax_call_to_json_web_service('http://example.com/city=nyc");
for (i=0; i<allHomesJSON.length; i++) {
  document.getElementByID('all-homes').innerHTML += '<div class="individual-listing"><img src="allHomesJSON[i].img">Price: allHomesJSON[i].price, Sqft: allHomesJSON.sqft[i] ...';
}
</script>
<body>
<div id="all-homes" style="height:400px">
</div>

So the resulting generated HTML is something like:

<html>
<body>
<div id="all-homes" style="height:400px">
    <div class="individual-listing"><img src="http://example/x.jpg">Price: $300,000, Sqft: 2000</div>
    <div class="individual-listing"><img src="http://example/y.jpg">Price: $200,000, Sqft: 2000</div>
    <div class="individual-listing"><img src="http://example/z.jpg">Price: $500,000, Sqft: 2000<开发者_运维问答/div>
    <div class="individual-listing"><img src="http://example/a.jpg">Price: $100,000, Sqft: 2000</div>
    ...
</div>

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 :)

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.

Seems similar to this post: 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

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.