使用jQuery来延迟加载div？

我试图延迟加载一行divs直到滚动，有点像这样codepen。我似乎无法让我的任何jquery因某种原因而被解雇。使用jQuery来延迟加载div？

的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（依此类推）行，然后让第四行进入1。

感谢您的帮助！

来源

2015-04-06 knocked loose

一个无限的滚动/懒加载插件可能是你想要的，所以你不必重新发明车轮和处理所有的边缘情况：http://jscroll.com/ – DrCord

我会使用LazyLoadXT，但因为它是建立在Hubspot的COS/CMS上的，所以受到了限制。这些项目不能包含在数组中，就像他们想要以角度构建它或使用LazyLoad时一样。 –

我看到你修复了选择器，但现在你注意到你的滚动事件不会触发，因为你不能滚动？给你的'body'一个'height'即溢出，使滚动是可能的，像'体{高度：1000像素}' – RenaissanceProgrammer

你错过的类名外延（。）在你的第一选择的类名“恢复行”

// 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 

    } 
});

来源

2015-04-06 17:14:27 RenaissanceProgrammer

奇怪你怎么会错过这些样的东西。长话短说，代码现在是正确的，并在codepen上工作，所以这在技术上是解决方案。出于某种原因，它不想在Hubspot的COS/CMS中发射。所以我现在在他们的技术支持，谢谢你的帮助哈哈 –

下面是如何减缓一定的div http://jsfiddle.net/mronyrcv/1/

我拿个主意div的数量，并为它们分配一个数据行属性，以保持数字div。然后，我使用模运算符“％”来确定它们是否可以被4除。模数给你一个余数，这就是为什么在你的元素数量可以改变的情况下，它比直分区好。酸当量如果您需要限制页面上的元素数量。我附加了这个活动，让他们看到一个按钮。该代码指出，如果在执行数据行％4公式后剩余的数字为0，则使用.delay（）方法防止fadeToggle在900ms内触发，如果有余数仍会使用.delay（）方法，但只有500毫秒。

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。

来源

2015-04-06 17:55:18 zfrisch

使用jQuery来延迟加载div？

回答

相关问题