Содержимое внутри меню мигает только во время перезагрузки / обновления страницы

Question

Я пытался реализовать мегаменю, используя этот плагин, https://www.jqueryscript.net/demo/Responsive-Mega-Menu-dmenu/demo/xmpl1.html

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

https://jsfiddle.net/mdsebans/s2quywj5/6/

            <script>
$(document).ready(function() {
    $(function() {
        $(window).resize();
    });
    $('#menu').dmenu({
        menu: {
            logo: true,
            align: 'right'
        },
        item: {
            bg: true,
            border: false,
            subindicator: true,

            fit: [{
                items: null,
                fitter: 'icon-hide',
                order: 'all'
            }, {
                items: null,
                fitter: 'icon-only',
                order: 'all'
            }, {
                items: ':not(.dm-item_align-right)',
                fitter: 'submenu',
                order: 'rtl'
            }, {
                items: ':not(.dm-item_align-right)',
                fitter: 'hide',
                order: 'rtl'
            }]
        },
        submenu: {
            arrow: false,
            border: false,
            shadow: true
        },
        subitem: {
            bg: true,
            border: false
        }

    });
});

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

Answer 1

Вы можете использовать загрузчик для сокрытия данных HTML, чтобы показать пользователям.

Когда браузер отображает страницу, он сначала отображает содержимое HTML

См. Здесь

Таким образом, вы можете использовать следующий код: - КонецИз файла HTML добавьте эту ссылку

<div class="loader"></div>

В файле CSS

.loader{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:#fff;
  }

В JQuery вы можете добавить эту строку, чтобы скрыть

$(function() {
       $(window).resize();
       $(".loader").hide();
   });

Я думаю, что этопоможет.