Автоматическая загрузка контента

@_marisha · Регистрация: 29.05.2011

Студворк — интернет-сервис помощи студентам

Доброго времени суток!.
На данный момент в разделе выводится 12 элементов, после прокрутки списка к концу отображается ещё 12 элементов и так далее. На данный момент подгрузка следующих 12 элементов заметна.
Необходимо сделать так, чтобы следующий список товаров отображался когда прокрутка предыдущего списка подходит к 9 элементам.
Подскажите, пожалуйста, каким образом возможно реализовать. Возможно есть идеи по реализации. Спасибо.
Прикрепляю шаблон списка товаров

@_marisha · 18.10.2019, 10:57 **[ТС]**

Также прикладываю main.js (стр 5061)

@voral · 19.10.2019, 21:50

Я делал подобное следующим образом... Так или иначе у вас есть некий маркер который командует когда нужно загружать следующий шаг. Так или иначе он выражается в пикселях. Так вот добавьте в формулу некую дельту, чтоб срабатывало раньше...

ЗЫ Код не читал. Убегаю..

@stanislavj · 20.10.2019, 11:20

_marisha, вычисляешь Y 9-го элемента, как только до него опустились делаешь запрос на сервер за следующей порцией элементов и т.д.

@_marisha · 21.10.2019, 07:17 **[ТС]**

voral, спасибо что откликнулись

Сообщение от voral

Так или иначе у вас есть некий маркер

- вот как бы его найти это маркер

Добавлено через 2 минуты
stanislavj, спасибо что откликнулись

Сообщение от stanislavj

вычисляешь Y 9-го элемента

- высота первого ряда 498px, значит высота трех рядом должна быть 1494 px. Вот только с реализацией затрудняюсь

Добавлено через 17 минут
Если верно понимаю то используется этот кусок кода для подгрузки следующих элементов (стр 5061)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
$(document).on('click', '.ajax_load_btn', function(){
        var url=$(this).closest('.container').find('.module-pagination .flex-direction-nav .flex-next').attr('href'),
            th=$(this).find('.more_text_ajax');
 
        if(!th.hasClass('loading'))
        {
            th.addClass('loading');
            var objUrl = parseUrlQuery(),
                add_url = ''
                obGetData = {"ajax_get": "Y", "AJAX_REQUEST": "Y"};
            if('clear_cache' in objUrl)
            {
                if(objUrl.clear_cache == 'Y')
                    add_url = '&clear_cache=Y';
            }
            if(th.closest('.goods-block.ajax_load'))
                obGetData.bitrix_include_areas = 'N';
            $.ajax({
                url: url+add_url,
                data: obGetData,
                success: function(html){
                    if($('.ajax_load').length)
                    {
                        th.removeClass('loading');
                        if($('.display_list').length){
 
                            $('.display_list').append(html);
                        }else if($('.block_list').length){
                            $('.block_list').append(html);
                            touchItemBlock('.catalog_item a');
                        }else if($('.module_products_list').length){
                            $('.module_products_list > tbody').append(html);
                        }
                        setStatusButton();
                        initCountdown();
 
                        var eventdata = {action:'ajaxContentLoadedTab'};
                        BX.onCustomEvent('onAjaxSuccess', [eventdata]);
                        $('.bottom_nav').html($(html).find('.bottom_nav').html());
                    }
                    else
                    {
                        if($('.banners-small.front').length)
                        {
                            $('.banners-small .items.row').append(html);
                            $('.bottom_nav').html($('.banners-small .items.row .bottom_nav').html());
                            $('.banners-small .items.row .bottom_nav').remove();
                        }
                        else
                        {
                            if(th.closest('.item-views').find('.items').length)
                            {
                                th.closest('.item-views').find('.items').append(html);
                            }
                            else
                            {
                                $(html).insertBefore($('.blog .bottom_nav'));
                            }
 
                            $('.bottom_nav').html($('.bottom_nav:hidden').html());
                            $('.bottom_nav:hidden').remove();
                        }
 
                        var eventdata = {action:'ajaxContentLoaded', content: html};
                        BX.onCustomEvent('onCompleteAction', [eventdata, th[0]]);
 
                        setTimeout(function(){
                            $('.banners-small .item.normal-block').sliceHeight({resize: false});
                            if($('.item.slice-item').length)
                            {
                                $('.item.slice-item .title').sliceHeight({resize: false});
                                $('.item.slice-item').sliceHeight({resize: false});
                            }
                            th.removeClass('loading');
                        }, 100);
                    }
                }
            })
        }
    })

Добавлено через 27 минут

Сообщение от _marisha

if($('.ajax_load').length)

- length выводится 1, т.е. нет конкретного значения px

@stanislavj · 21.10.2019, 08:19

Сообщение от _marisha

Вот только с реализацией затрудняюсь

https://learn.javascript.ru/coordinates

@_marisha · 21.10.2019, 11:37 **[ТС]**

stanislavj, например вычислили среднее значение экрана

JavaScript
1
let centerY = document.documentElement.clientHeight / 2;

Каким образом теперь сделать подгрузку на полученной высоте?

В шаблоне списка товаров за подгрузку отвечает след код (стр 543):

PHP
1
2
3
4
5
6
7
<?if($arParams["AJAX_REQUEST"]=="Y")
    { ?>
        <div class="wrap_nav">
    <?}?>
    <div class="bottom_nav <?=$arParams["DISPLAY_TYPE"];?>" <?=($arParams["AJAX_REQUEST"]=="Y" ? "style='display: none; '" : "");?>>
        <?if( $arParams["DISPLAY_BOTTOM_PAGER"] == "Y" ){?><?=$arResult["NAV_STRING"]?><?}?>
    </div>

Добавлено через 12 минут
На всякий случай в main.js передаю высоту

JavaScript
1
obGetData = {"ajax_get": "Y", "AJAX_REQUEST": "Y", "clientHeight": centerY};

Полученная высота в шаблоне доступна

PHP
1
$_GET['clientHeight']

Только что сделать чтобы подгрузка сработала на указанной высоте

@stanislavj · 21.10.2019, 12:30

ловишь событие скролла, вычисляешь текущее положение и что-нибудь делаешь
https://learn.javascript.ru/onscroll

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@voral 3012 / 1446 / 262 Регистрация: 16.03.2008 Сообщений: 6,449 Записей в блоге: 2
	19.10.2019, 21:50
	Я делал подобное следующим образом... Так или иначе у вас есть некий маркер который командует когда нужно загружать следующий шаг. Так или иначе он выражается в пикселях. Так вот добавьте в формулу некую дельту, чтоб срабатывало раньше... ЗЫ Код не читал. Убегаю.. 0

@stanislavj 30 / 26 / 3 Регистрация: 01.09.2018 Сообщений: 141
	20.10.2019, 11:20
	_marisha, вычисляешь Y 9-го элемента, как только до него опустились делаешь запрос на сервер за следующей порцией элементов и т.д. 0

@stanislavj 30 / 26 / 3 Регистрация: 01.09.2018 Сообщений: 141
	21.10.2019, 12:30
	ловишь событие скролла, вычисляешь текущее положение и что-нибудь делаешь https://learn.javascript.ru/onscroll 0