时间戳

首页 > 解决方案 > 重新加载/刷新页面时菜单内的内容会闪烁

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

问题描述

我试图使用这个插件来实现一个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
        }

    });
});

不希望每次单击菜单项或重新加载页面时都显示下拉列表中的内容。

标签： jqueryhtmlcssdrop-down-menu

解决方案

您可以使用 loader 隐藏 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();
   });

我认为这会有所帮助。

推荐阅读