Question

I’m having a hard time trying to implement a lazy load for a group of divs, I’m designing an administrative page that displays a lot of information, the information at the bottom I would like to fetch only as needed, preferably until the user scrolls to the bottom and I use jquery to fetch the content using ajax.

My divs are in the format:

<div id="86296" class="messages"><div>
<div id="86322" class="messages"><div>
<div id="86394" class="messages"><div>
<div id="86503" class="messages"><div>
<div id="86635" class="messages"><div>
<div id="86644" class="messages"><div>

Where the number is the message id that I need to pass when making the ajax call. Any ideas of how I can implement this??

Answer 1

What you are trying to accomplish is not really “lazy loading”. Fetching the data (the DIVs) and the content in them should be done with an $.ajax() call if you want to get it after the page has been loaded.

My suggestion for performance would be:

1. Load the page with only your initial contents.

2. Hide a container for your ‘lazy loaded’ containers to be stored in.

3. on $(document).ready() load the DIVs with an AJAX call, and then show the hidden container…

You’ll get the performance you are looking for by avoiding them on the initial page load, but not have to tie into any scrolling mechanics that would be very tricky.

$(document).ready(function() {
    // get your element id here and stuff it in a var.
    // make your $.ajax() call here, 
    //   - on success, add the data to the element with the ID you fetched.
});