Menu
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.
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>
885
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 :)
122
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
