Question

这是我的情况：
我有一个需要登录的网页，html看起来像这样：

<head>
    <script src="login_control.js"></script>
</head>
<body>  
    <div id="login"></div>
    <div id="main">  
        many things here(images, etc)
    </div>  
    <script></script>
    <script></script>
    <script></script>
    ...
</body>

加载页面时，如果用户尚未登录，则执行login_control.js 将显示#login div。并且用户看不到div#main 现在的问题是，即使用户看不到div#main，其中的内容（图片等）仍将被加载，这使得感觉页面很慢......

所以我想知道是否可以这样做：
首先显示登录div，如果用户成功登录，则开始加载div #main。最简单的方法是什么？

Answer 1

您可以从src上的<img>开始，然后在用户登录后动态设置它。使用AJAX（XMLHttpRequest）执行用户登录，然后如果它成功了，设置图像src并将另一个div设置为可见。

Answer 2

理想情况下，您可以在用户完成登录后使用AJAX加载仅限成员内容。使用jQuery，假设您有服务器端方法来处理请求URL和返回受保护的内容，登录后进行类似这样的AJAX调用：

$('#main').load('path/to/protected/content');

如何控制何时加载网页中的元素？

2 个答案: