Мобильная версияКак отсортировать лениво загруженный список? ⇐ CSS
-
Гость
Как отсортировать лениво загруженный список?
У меня есть URL-адрес с большим количеством элементов списка (около 400), созданный в шаблоне с помощью flask. Список добавляется по мере того, как пользователь прокручивает сайт. Элементы списка просто не отображаются вначале, пока они не «загружены».
Это мой JavaScript для отложенной загрузки:
document.addEventListener("DOMContentLoaded", function () { const list = document.querySelector(".snow-length-list-left"); константные элементыToLoad = 15; // Количество элементов для загрузки за раз пусть startIndex = 0; // Функция для загрузки дополнительных элементов функция loadMoreItems() { for (let i = startIndex; i < startIndex + itemsToLoad; i++) { const listItem = list.children; если (списокItem) { listItem.classList.add("загружен"); // Показ загруженного элемента } еще { перерыв; // Остановить загрузку, когда все элементы загружены } } startIndex += itemsToLoad; } // Начальная загрузка загрузитьMoreItems(); // Загружаем больше элементов при прокрутке страницы вниз window.addEventListener("прокрутка", функция () { если ( window.innerHeight + window.scrollY >= document.body.offsetHeight && startIndex < список.дети.длина ) { загрузитьMoreItems(); } }); }); Это сделало мою систему сортировки устаревшей, поскольку она не сортирует незагруженные элементы списка.
Это мой JavaScript для сортировки:
function sortList(listClass, критерии) { const list = document.querySelector(`.${listClass}`); const items = Array.from(list.getElementsByTagName('li')); items.sort((a, b) => { const aValue = a.getAttribute(критерий); const bValue = b.getAttribute(критерий); if (критерий === 'станция') { вернуть aValue.localeCompare(bValue); } else if (критерий === 'глубина' || критерий === 'разница') { if (aValue === 'отсутствует') вернуть 1; // Нечисловые значения идут после числовых значений if (bValue === 'отсутствует') return -1; // Нечисловые значения идут после числовых значений вернуть parseInt(bValue) - parseInt(aValue); } }); items.forEach(item => list.appendChild(item)); } Мне нужно использовать отложенную загрузку, потому что элементы списка можно расширять с помощью CSS-анимации. При этом каждый отдельный элемент списка перемещается под этот элемент списка. Есть ли у кого-нибудь идеи, как это решить?
У меня есть URL-адрес с большим количеством элементов списка (около 400), созданный в шаблоне с помощью flask. Список добавляется по мере того, как пользователь прокручивает сайт. Элементы списка просто не отображаются вначале, пока они не «загружены».
Это мой JavaScript для отложенной загрузки:
document.addEventListener("DOMContentLoaded", function () { const list = document.querySelector(".snow-length-list-left"); константные элементыToLoad = 15; // Количество элементов для загрузки за раз пусть startIndex = 0; // Функция для загрузки дополнительных элементов функция loadMoreItems() { for (let i = startIndex; i < startIndex + itemsToLoad; i++) { const listItem = list.children; если (списокItem) { listItem.classList.add("загружен"); // Показ загруженного элемента } еще { перерыв; // Остановить загрузку, когда все элементы загружены } } startIndex += itemsToLoad; } // Начальная загрузка загрузитьMoreItems(); // Загружаем больше элементов при прокрутке страницы вниз window.addEventListener("прокрутка", функция () { если ( window.innerHeight + window.scrollY >= document.body.offsetHeight && startIndex < список.дети.длина ) { загрузитьMoreItems(); } }); }); Это сделало мою систему сортировки устаревшей, поскольку она не сортирует незагруженные элементы списка.
Это мой JavaScript для сортировки:
function sortList(listClass, критерии) { const list = document.querySelector(`.${listClass}`); const items = Array.from(list.getElementsByTagName('li')); items.sort((a, b) => { const aValue = a.getAttribute(критерий); const bValue = b.getAttribute(критерий); if (критерий === 'станция') { вернуть aValue.localeCompare(bValue); } else if (критерий === 'глубина' || критерий === 'разница') { if (aValue === 'отсутствует') вернуть 1; // Нечисловые значения идут после числовых значений if (bValue === 'отсутствует') return -1; // Нечисловые значения идут после числовых значений вернуть parseInt(bValue) - parseInt(aValue); } }); items.forEach(item => list.appendChild(item)); } Мне нужно использовать отложенную загрузку, потому что элементы списка можно расширять с помощью CSS-анимации. При этом каждый отдельный элемент списка перемещается под этот элемент списка. Есть ли у кого-нибудь идеи, как это решить?
