Использование jQuery для задержки загрузки divs?

Я пытаюсь отложить загрузку ряда divs до свитков, вроде как codepen. По какой-то причине я не могу заставить какой-либо из моих jquery загореться.Использование jQuery для задержки загрузки divs?

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-ю строку за один раз.

Спасибо за помощь!

источник

2015-04-06 knocked loose

Бесконечный плагин для прокрутки/ленивой загрузки, вероятно, вы хотите, так что вам не нужно повторно изобретать колесо и обрабатывать все крайние случаи: http://jscroll.com/ – DrCord

Я бы использовал LazyLoadXT, но ограничено, поскольку оно строится на COS/CMS Hubspot. Элементы не могут содержаться в массиве, как если бы я мог построить его в угловом режиме или использовать LazyLoad. –

Я вижу, что вы исправили селектор, но теперь вы заметили, что ваше событие прокрутки не срабатывает, потому что вы не можете прокручивать? дайте вашему 'body'' height', который переполняется, чтобы прокрутка была возможна, что-то вроде 'body {height: 1000px}' – RenaissanceProgrammer

Вы упускаете Classname денотат (.) В вашем первом селекторном для ClassName «резюме-строки»

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

Странно, как вы скучаете по этим вещам , Короче говоря, код теперь корректен и работает над кодепином, так что это было технически решение. По какой-то причине он не хочет запускаться в COS/CMS Hubspot. Так что я сейчас на технической поддержке с ними, спасибо за помощь хаха –

Вот идея о том, чтобы замедлить некоторые дивы http://jsfiddle.net/mronyrcv/1/

Я получаю количество divs и присваивать им все атрибут строки данных, который хранит номер div. Затем я использую оператор модуля «%», чтобы определить, можно ли их разделить на 4. Модуль дает вам остаток, поэтому он лучше, чем прямое деление в ситуациях, когда количество элементов может меняться. к.э. если вам нужно ограничить количество элементов на странице. Я приложил это событие, чтобы показать им кнопку. В коде указано, что если оставшееся число равно 0 после выполнения формулы строки данных 4 4, используйте метод .delay(), чтобы предотвратить fadeToggle от стрельбы в течение 900 мс, если есть остаток, он все равно будет использовать .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 для задержки загрузки divs?

ответ

Смежные вопросы