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

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();
});

我认为这会有所帮助。