Есть скрипт:
if ($x("div").is(".all-serv__wrapper")){
var offset_shops = 10;
var load = true;
// Получаем нужный элемент
var element = document.querySelector('.all-serv__wrapper hr');
var Visible = function (target) {
// Все позиции элемента
var targetPosition = {
top: window.pageYOffset + target.getBoundingClientRect().top,
left: window.pageXOffset + target.getBoundingClientRect().left,
right: window.pageXOffset + target.getBoundingClientRect().right,
bottom: window.pageYOffset + target.getBoundingClientRect().bottom
},
// Получаем позиции окна
windowPosition = {
top: window.pageYOffset,
left: window.pageXOffset,
right: window.pageXOffset + document.documentElement.clientWidth,
bottom: window.pageYOffset + document.documentElement.clientHeight
};
if (targetPosition.bottom > windowPosition.top && // Если позиция нижней части элемента больше позиции верхней чаcти окна, то элемент виден сверху
targetPosition.top < windowPosition.bottom && // Если позиция верхней части элемента меньше позиции нижней чаcти окна, то элемент виден снизу
targetPosition.right > windowPosition.left && // Если позиция правой стороны элемента больше позиции левой части окна, то элемент виден слева
targetPosition.left < windowPosition.right) { // Если позиция левой стороны элемента меньше позиции правой чаcти окна, то элемент виден справа
// Если элемент полностью видно, то запускаем следующий код
//console.clear();
//console.log('Вы видите элемент :)');
//alert('1');
if (load == true ){
$x.ajax({
'type': 'post',
'url' : '/wp-content/themes/cashberry_v1.0/main-page-shops.php',
'data': 'offset=' + offset_shops,
'beforeSend' : function(){
//$x('.all_shops .row').html('<h3 class="col-xs-12">Все магазины</h3><img class="load-shops" src="/wp-content/themes/cashberry_v1.0/goods_load/img/1453290903_poster.gif">');
$x('.load-shops').show();
},
'success': function (result) {
//if (result.length < 10) { // ЕСЛИ ЕСТЬ ПРОБЕЛЫ ИЛИ СИМВОЛЫ В PHP ОБРАБОТЧИКЕ
if (!result) {
load = false;
$x('.load-shops').hide();
//alert(result.length);
}
else {
//$x('.all-serv__wrapper .row').append('<div class="col-12">'+ offset_shops +'</div>');
$x('.all-serv__wrapper .row').append(result);
//offset_previusly_iteration = offset_shops;
//$x('.all_shops .row').append(load);
$x('.load-shops').hide();
//alert(result.length);
return;
// setTimeout(function () {
// load_iteration = true;
// }, 1000);
}
}
});
offset_shops = offset_shops + 10;
}
} else {
// Если элемент не видно, то запускаем этот код
//console.clear();
};
};
// Запускаем функцию при прокрутке страницы
window.addEventListener('scroll', function() {
Visible (element);
});
// А также запустим функцию сразу. А то вдруг, элемент изначально видно
Visible (element);
}
Вопрос - как в него добавить загрузку новых элементов спустя некоторое время, а не сразу как дойдем до нужного триггера? Если не сложно, то скиньте в комментарии правленый вариант с решением, т.к. в js я слабо шарю и ответ в духе "добавь такую то функцию" без примера не пойму