前端加载视图的设计模式 JavaScript

Question

我是网络编程的新手，正在寻找一种简单的模式来显示网络的 "loading"/等待视图。在我说别的之前，我只从服务器发送最少量的数据，并在客户端使用 AJAX 从服务器请求更多数据时开始向客户端发送 JS/HTML 资源（这可能不是最理想的，但请耐心等待）。所以基本上，理论上这应该意味着 web 视图最初会更早弹出，但会花费更多时间加载一些数据和相应的子视图。因此需要加载视图。

所以我们有了标准的 jQuery 函数 .ready()

fetchSomeDataAsynchronously(); //self-explanatory

$(document).ready(function () {

    //should I load waiting view here or can I initialize it earlier??

    window.mainUserHomeView = new MainUserHomeView({el: $("#user-home-main-div")});
    window.mainUserHomeView.render();

    window.userHomeMainTableView = new UserHomeMainTableView({el: $("#user-home-main-table-div")});
    window.userHomeMainTableView.render();


     fetchTeamSnapTeams(); //fetch more data asynchronously

});

也许我的问题很简单 - 我可以在 .ready() 触发之前显示加载屏幕吗？它看起来像什么？

Answer 1

是的，你可以。只需包含脚本即可在 HTML 的 head 或 body 的开头显示视图。不过，请确保在加载所需资源（例如 jQuery）后放置它。

简化示例：

<html>
    <head>
        <script type="text/javascript">
            function showLoadingView() {
                // ...
            }

            showLoadingView();
        </script>
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

前端加载视图的设计模式 JavaScript

Design pattern for loading view in front-end JavaScript

javascript

ajax

jquery

backbone.js