如何延迟从头部加载 html 主体？

Question

在我的html文件的 head 部分中，我添加了一个库testLibrary.js ，在该js文件中，我要求服务器端做出响应。 收到回复后有没有办法加载正文？

这是我的html头：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">

    <title>Test</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://*****.com/js/testLibrary.js"></script>

</head>

在testLibrary.js ，我正在这样做：

    $(document).ready(function () {
        $.get(host+ "/ws/getInfo?pid=" + id, function (data, status) {
            try {
                if (data[0].status == "VALID") {
                    //let the body load
                } else {
                   // redirect to somewhere else
                }
            } catch (e) {
                console.log(e);
            }
        });
    });

我希望正文在得到response和验证之前停止加载。 有可能吗？ 或者有什么办法吗？ 该库可供任何人使用，因此我无法控制身体。

Answer 1

在服务器端调用开始之前和处理调用时，将预加载器添加到全屏覆盖，成功替换您的内容并删除覆盖加载器。

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

在底部添加 HTML 元素：

<div class="modal"><!-- Place at bottom of page --></div>

CSS：

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

如何延迟从头部加载 html 主体？

问题描述

1 个解决方案

解决方案1
1 2020-12-29 07:44:02

如何延迟从头部加载 html 主体？

问题描述

1 个解决方案

解决方案1 1 2020-12-29 07:44:02

解决方案1
1 2020-12-29 07:44:02