1.用户可能会点击的页面通过预加载,在空闲时提前加载

<link rel="prefetch" href="/index/classes/add_class" />

2.预加载的遮罩

1.设置该元素的样式,希望遮罩或动画出现的位置(调整margin值)

2.待加载完成后删除该元素

(function ($) {
    // alert('start');
    $('html').append(`<div id="preload"></div>
    <style id="preload_style">
        #preload{
            margin-top: 60px;
            margin-left: 200px;
            width: 100%;
            background-color: #96a0b6;
            opacity: 0.5;
            height: 999px;
            position: absolute;
            z-index: 9999;
        }
    </style>`);
})(jQuery);
//②页面加载后执行
$(document).ready(function(){
    // alert('jquery ready');
    $('#preload').fadeOut(function () {
        $('#preload').remove();
        $('#preload_style').remove();
    });
});