CODEWITHSUNDEEP
javascriptjqueryhtmlcss
knocked loose
knocked loose

Reputation: 3304

Using jQuery to delay loading of divs?

I am trying to delay loading a row of divs until scrolls, sort of like this codepen. I can't seem to get any of my jquery to fire for some reason.

jQuery / JS

// lazy load
$(".resource-container resume-row").slice(1).hide();

 var mincount = 0;
 var maxcount = 1;


 $(window).scroll(function () {
     if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {
         $(".resource-container .resume-row").slice(mincount, maxcount).slideDown(100);

         mincount = mincount + 0;
         maxcount = maxcount + 5;
         //Loads 1 variable at a time 

     }
 });

Here is my attempt so far: my codepen. I would like to ultimately load 3/4(and so on) rows and then have the 4th row come in 1 at a time.

Thanks for the help!

Upvotes: 0

Views: 225

Answers (2)

zfrisch
zfrisch

Reputation: 8660

Here's an idea of how to slow certain divs http://jsfiddle.net/mronyrcv/1/

I get the number of divs and assign them all a data-row attribute that keeps the number div they are. I then use the modulus operator " % " to determine if they can be divided by 4. Modulus gives you a remainder which is why it's better than straight division in situations where you're number of elements can change. a.e. if you need to limit number of elements on a page. I attached the event to show them to a button. The code states that if the number remaining is 0 after the data-row % 4 formula is performed, then use the .delay() method to prevent fadeToggle from firing for 900ms, if there IS a remainder it will still use the .delay() method but only for 500ms. 

var i;
for(i=1; i < ($("div").length +1);i++) {
$("div").eq(i-1).attr("data-row", i);
}

$("#showthese").on("click", function() {

var resources = $("div").length; 
for(i=0; i < resources;i++) {
    if ($("div").eq(i).attr("data-row") % 4 === 0) {
        $("div").eq(i).delay(900).fadeToggle();
  }
    else {
        $("div").eq(i).delay(500).fadeToggle();
  }
 }
});

That's the concept. You can replace fadeToggle with any animation.

Upvotes: 0

RenaissanceProgrammer
RenaissanceProgrammer

Reputation: 484

You're missing the classname denotation (.) in your first selector for the classname "resume-row"

// lazy load
$(".resource-container .resume-row").slice(1).hide();

 var mincount = 0;
 var maxcount = 1;


 $(window).scroll(function () {
     if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {
         $(".resource-container .resource-row").slice(mincount, maxcount).slideDown(100);

         mincount = mincount + 0;
         maxcount = maxcount + 5;
         //Loads 1 variable at a time 

     }
 });

Upvotes: 2

Related Questions