Как правильно составить список до 10000 элементов.
Бесконечная выпадающая технология загрузки позволяет пользователям прокручивать и просматривать перед большим количеством блоков контента. Этот метод состоит в том, чтобы продолжать загружать новый контент во время прокрутки вниз.
Когда вы используете прокрутку в качестве основного метода обнаружения данных, это может позволить вашим пользователям дольше оставаться на веб -странице и увеличивать вовлечение пользователей. С популярностью социальных сетей пользователи используют большое количество данных. Беспроводная прокрутка обеспечивает эффективный способ позволить пользователям просматривать огромные объемы информации, не ожидая предварительной загрузки страницы.
Если мы изменим наш образ мышления, если на странице есть 10 000 компонентов прямых столбцов, как мы можем использовать 5 компонентов для динамического отображения всей страницы?
РешениеВ оптимизации длинных списков у нас есть много решений, таких как подкидка, ленивая загрузка и т. Д. Существует очень хорошее взаимодействие (изображение хризантема), чтобы пользователь мог ждать. Этот план также очень успешный.
Как найти другой способ?
1. В применении отдельных страниц мы можем проанализировать схему пейджинг
2. Можем ли мы использовать кронштейн для поддержки всей длины списка, когда экраны прокручиваются в соответствующем положении и отображают соответствующие 10 элементов
Мигающая проблемаКогда мы реализуем эту идею, возникнет проблема мерцания. Поскольку события прокрутки частые, мы обнаруживаем, что элементы, которые мы видим, постоянно перекрашиваются, потому что мы обнаруживаем, какие десять элементов необходимо отображать в каждом заставке, а затем заменить их напрямую.
Идея здесь заключается в том, что когда я вижу позицию экрана, я буду рендеринг 10, а затем 10 вверх и вниз, с общим количеством 30. При управлении рендерингом я всегда заменяю верхние или нижние элементы, чтобы часть, которую мы можем видеть в середине, не будет перекрашена и отображается. Просто предварительно предопределенные данные перерисовываются.
принципРеализуйте компонент, который может отображать список n элементов с фиксированным размером окна 5 элементов: то есть в любое время в элементах N Infinite Scrill N есть только 5 контейнеров DOM.
<ul> <li style = transform: translate3d (0px, 0px, 0px);>… </li> <li style = transform: translate3d (0px, 60px, 0px);>… </li> </ul>
Например: 100 элементов, 5 отображаются на домашней странице. Инициализация [0,1,2,3,4] эти 5 <li> должны быть сделаны. Когда я немного прокручиваю вниз, [1,2,3,4,5] их необходимо отображать. В настоящее время не заменяйте в целом, только условия разницы должны быть заменены. Структура должна быть [5,1,2,3,4]. Поскольку это абсолютное позиционирование, оно будет отделено от стандартного потока. Единый перекрашенный не повлияет на остальные четыре, тем самым повысит производительность.
Как его реализовать <! Doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = width device, начальная шкала = 1.0> <script src = https: //cdn.bootcss.com/jquery/3.2.1/jquery.min.js> </script> <title> документ </title> <style> body, ul, li {margin: 0; Заполнение: 0; Список стиля: нет; } ul {позиция: относительно; } ul li {позиция: абсолют; Верх: 0; Ширина: 100%; Высота: 31px; высота линии: 32px; Пограничный подвод: 1PX SOLID #CCC; } </style> </head> <body> <ul> </ul> </body> <script> // Тотальный контейнер var list = []; // элементы в визуальном диапазоне var showlist = []; // рендеринг контейнер var renderlist = []; // Высота каждого контейнера var lineHeight = 32 // Инициализировать 1000 элементов для (var i = 0; i <1000; i ++) {list.push ({id: i, текст: 'th' + (i + 1) + 'elements', top: i * lineHeight, снизу: (i + 1) * lineHeight})} // инициализируйте высоту контейнера $. «Высота: ' + 1000 * lineHeight +' px ') // Найти визуализацию функции (вверху, внизу) начального контейнера {showlist = [] // Отметьте, какие данные повторяются с помощью визуализации после его визуализации. список [i] if (item.top <= window.scroly && item.bottom> window.scroly) {currentIndex = i; перерыв; }} var range = 0 // Найти элементы, которые будут отображаться вверх и вниз соответственно в наложенном в настоящее время элементе, пока общее число не достигнет 35, в то время как (диапазон <100 && showlist.length + одинаковый Showlist В то время, замените unmarked element if (renderlist.includes (list [currentIndex - range] .id)) {// То же самое list.length && range != 0) { if (renderList.includes(list[currentIndex + range].id)) { sameIndex.push(renderList.indexOf(list[currentIndex + range].id)) } else { showList.push(list[currentIndex + range]) } } range++ } // Replace the new elements that need to be rendered with the render list elements that are not помечен if (renderlist.length> 0) {for (var i = 0; я <renderlist.length; i ++) {if (! То же самое iniNcludes (i) && showlist.length) {renderlist [i] = showlist.shift (). id $ ('ul li'). eq (i) .html (list [renderlist [i]]. id +list [i]. Список [renderList [i]]. Top + 'px, 0px);')}}} else {// Инициализировать список для первого времени renderlist = showlist.map (function (val) {return val.id}) renderlist.map (function (key) {$ ('ul'). Приложение ($ ($ style = transfort3d (0px, 'key). 'px, 0px);>#' + list [key] .id + list [key] .text + '</li>'))})} console.log (renderlist)} // Первый рендеринг render () $ (window) .scroll (e) {render ()}); </script> </html> ТодоКлючевые моменты
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.