重新加载/刷新页面时菜单内的内容会闪烁

Question

我正在尝试实现一个 megamenu，使用这个插件，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 内容

See Here

所以您可以使用以下代码：- 在 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();
   });

我认为这会有所帮助。