Lazy Loading a jQuery ajax function

[csdude55]

I have a function that looks like:

$(function() {
 var banner = 0;

 for (var j=startB; j <= lB; j++) {
  if ($('#local_' + j).length)
   $('#local_' + j).ajax('local.php?lb=' + j);
 }
});

But I don't want it to load unless <div id="local_[0-9]"></div> is actually in view on the screen, mainly because I'm counting the views in MySQL and don't want to show a falsely inflated number to my users. I've looked at a lot of pre-built jQuery lazy loading scripts, but all I can find are ones for images, so I'm trying to roll my own.

I thought it would be as simple as this:

window.onscroll = onDivScroll;

var sTop = 0;
function onDivScroll() {
 sTop = document.body.scrollTop;

 for (var j=startB; j <= lB; j++) {
  if ($('#local_' + j).length && $('#local_' + j).scrollTop() == sTop) {
   // alert() just for testing
   alert($('#local_' + j).scrollTop() + ' == ' + sTop);

   $('#local_' + j).ajax('local.php?lb=' + j);
  }
 }
}

But of course that doesn't load the ajax script that is above the fold by default until the user scrolls.

Then I tried modifying it to this:

window.onscroll = onDivScroll;
localLoad();

var sTop = 0;
function onDivScroll() {
 sTop = document.body.scrollTop;
 localLoad();
}

function localLoad() {
 for (var j=startB; j <= lB; j++) {
  if (
   $('#local_' + j).length && 
   (
    // I added this
    $('#local_' + j).scrollTop() < screen.height ||

    $('#local_' + j).scrollTop() == sTop
   )
  ) {
   // alert() just for testing
   alert($('#local_' + j).scrollTop() + ' == ' + sTop);

   $('#local_' + j).ajax('local.php?lb=' + j);
  }
 }
}

This solved the issue of it not loading above the fold, but now everything constantly reloads with every scroll.

Now I'm kinda stuck, and I'm starting to think that I might be over-complicating things, and probably reinventing the wheel.

Can you guys suggest a better way to accomplish what I'm trying to do? If not, what's the smarter way to keep everything from reloading over and over?

[csdude55]

Well, for those interested, I might have it... emphasis on "might", though, cause it's 4am and God knows how well I actually code at 4am :-P

var x;
var loaded = new Array();

window.onscroll = onDivScroll;

// onLoad function, send default 0 instead of document.body.scrollTop
localLoad(0);

function onDivScroll() {
 // apparently document.body.scrollTop is deprecated for some reason
 // localLoad(document.body.scrollTop);
 //
 // this is the recommended way now
 // var bodyScrollTop = window.pageYOffset || 
 // document.documentElement.scrollTop || 
 // document.body.scrollTop || 
 // 0;
 // localLoad(bodyScrollTop);
 //
 // but since I am using jQuery
 localLoad($(document).scrollTop());
}

function localLoad(sTop) {
 // startB and lB are my own variables, but I just have them loading in a loop
 for (var j=startB; j <= lB; j++) {

 // for some reason I had to assign these to a variable. There has to be
 // a better way than subtracting the screen.height, anyway, though
 x = $('#local_' + j).offset().top - screen.height;

 if (
 // make sure the element actually exists
 $('#local_' + j).length && 

 // after it's loaded once, prevent it from reloading after every scroll
 loaded[j] != 1 && 

 // not sure why this doesn't work:
 // $('#local_' + j).offset().top - screen.height <= sTop
 x <= sTop
 ) {
 $('#local_' + j).ajax('local.php?lb=' + j);
 loaded[j] = 1;
 }
 }
}