使用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？

回答

相關問題