Question

我试图延迟加载一行div直到滚动，有点像codepen。我出于某种原因似乎无法解决任何问题。

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 

     }
 });

到目前为止，这是我的尝试：my codepen。我想最终加载3/4（依此类推）行，然后让第4行一次加入1行。

感谢您的帮助！

Answer 1

你的第一个选择器中缺少类名称（。），类名为“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 

     }
 });

Answer 2

这是一个如何减慢某些div的想法 http://jsfiddle.net/mronyrcv/1/

我得到div的数量并为它们分配所有数据行属性，以保持它们的数字div。然后我使用模数运算符“％”来确定它们是否可以除以4.模数给出一个余数，这就是为什么在元素数量可以改变的情况下它比直线除法更好。酸当量如果您需要限制页面上的元素数量。我附上了活动，向他们展示了一个按钮。该代码指出，如果在执行数据行％4公式后剩余的数字为0，则使用.delay（）方法防止fadeToggle触发900ms，如果有余数，它仍将使用.delay（）方法，但只有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();
  }
 }
});

这就是概念。您可以用任何动画替换fadeToggle。

使用jQuery延迟加载div？

2 个答案: