Динамическая загрузка большого выбираемого / сортируемого элемента jQuery

Question

Я пытаюсь настроить элемент списка (для использования в форме), который использует плагины jQuery Sortable и Selectable, который использует функцию Sortable «connectWith» и содержит большое количество элементов.

У меня есть способ создать нужный мне элемент, используя Sortable и Selectable, но загрузка списка занимает много времени, замораживая всю страницу до тех пор, пока это не будет сделано (и это займет достаточно много времени, чтобы Firefox сказал мне "Веб-страница тормозит ваш браузер ").Я пытаюсь выяснить, как лучше всего загрузить список на странице и не дать моему веб-браузеру пожаловаться.

Хорошая длительность загрузки этого элемента - я думаю, что я хочу сделать это отдельно загрузить элемент в элемент div внутри страницы и в идеале показать «загрузочный» элемент div во время его загрузки.

Ниже приводится код, который я использую, адаптированный здесь: https://codepen.io/kabuki/pen/NPLmWY

Javascript (с использованием jQuery 3.3.1 и jQuery UI 1.12.1):

$('#search_elements_included, #search_elements_available').selectable({
    cancel: '.handle, .ui-selected',
    filter: '> li'
}).sortable({
    connectWith: ".connectedSortable",
    items: "> li",
    handle: 'div, .handle, .ui-selected',
    helper: function(e, item) {
        if ( ! item.hasClass('ui-selected') ) {
            item.parent().children('.ui-selected').removeClass('ui-selected');
            item.addClass('ui-selected');
        }
        var selected = item.parent().children('.ui-selected').clone();
        ph = item.outerHeight() * selected.length;
        item.data('multidrag', selected).siblings('.ui-selected').remove();
        return $('<li/>').append(selected);
    },
    start: function(e, ui) {
        console.log(ph);
        console.log(ui.placeholder);
        ui.placeholder.css({'height':ph});
    },
    stop: function(e, ui) {
        var selected = ui.item.data('multidrag');
        ui.item.after(selected);
        ui.item.remove();
    }
});

Код шаблона Django:

<div id="search_dropdown">
    <ul id="search_elements_available" class="selectable connectedSortable">

        {% for one_element in search_element_options %}

            <li class="ui-state-default ui-corner-all">
                <div class='handle'><i class='ui-icon ui-icon-search'></i></div>
                <div class="sort-item">
                    {{ one_element.header }} ({{ one_element.field_id }})
                </div>
            </li>

        {% endfor %}

    </ul>

    <ul id="search_elements_included" class="selectable connectedSortable">
    </ul>
</div>

Результирующий HTML:

<div id="search_dropdown">
    <ul id="search_elements_available" class="selectable connectedSortable">
        <li class="ui-state-default ui-corner-all">
            <div class='handle'><i class='ui-icon ui-icon-search'></i></div>
            <div class="sort-item">Element 1 (element_1_id)</div>
        </li>
        <li class="ui-state-default ui-corner-all">
            <div class='handle'><i class='ui-icon ui-icon-search'></i></div>
            <div class="sort-item">Element 2 (element_2_id)</div>
        </li>
        <li class="ui-state-default ui-corner-all">
            <div class='handle'><i class='ui-icon ui-icon-search'></i></div>
            <div class="sort-item">Element 3 (element_3_id)</div>
        </li>        
        <! -- ... many more li elements ... -->
    </ul>

    <ul id="search_elements_included" class="selectable connectedSortable">
    </ul>
</div>

Я смотрел на jQuery.load (), но мне не нужно загружать внешнюю страницу, поэтомуЯ не думаю, что это то, что я хочу.

Я пытался поместить javascript в отдельную функцию, которая вызывается для document.ready (), но это все равно останавливает всю страницу.

Я также посмотрел эту ленивую библиотеку для jQuery: http://jquery.eisbehr.de/lazy/, но я не уверен, возможно ли адаптировать это для чего-то подобного, или что мне нужно было бы лениво-загрузка в первую очередь (как если бы я хотел лениво загрузить каждый элемент формы? Кроме того, элементы формы генерируются языком шаблонов Django, так что мне бы тоже пришлось обойти это.)

Еслилюбой может дать совет о том, как лучше всего загрузить такую ​​крупную вещь на странице, это будет очень цениться.Кроме того, если заголовок этого сообщения не описывает проблему должным образом, не стесняйтесь ее изменять.

Спасибо!