加载整个页面

Load whole page

本文关键字：加载      更新时间：2023-09-26

这似乎是一个基本问题。

我有一个轻量级的网站，想一次加载整个页面，这样就可以链接到主页/联系人/。。。网站的部分内容将很快加载。

实现这一目标的最佳机制是什么？

将这些页面加载到不可见的div中，然后在用户单击链接时通过Javascript显示/隐藏它们。

我已经设置了一个基本的jsfiddle来展示如何使用jquery 实现这一点

http://jsfiddle.net/9DMBq/

基本上，我用html和css创建了这种上下文：

css：

<style>
#container { height: 200px; width: 400px; background-color: #CCC; }
h3 { font-size: 20px; padding:5px; }
.button {cursor: pointer; padding:10px; background-color: #EEE; margin:5px;}
.content { position: absolute; width: 400px; height: 100px; background-color: #FFF}
​</style>

html:

<div id="container">
<span id="homenav" class="button">Home</span>
<span id="aboutnav" class="button">About</span>
<br>
</br>
<div id="home" class="content">
    <h3>home</h3>
</div>
<div id="about" class="content" style="display: none;">
    <h3>about</h3>
</div>
</div>

然后我添加了一些Jquery使其工作：

$('.button').click(function() {
    var whereto = $(this).attr("id").replace('nav', '')
    $('.content').fadeOut(function() {
        $('#' + whereto).fadeIn()
    })
})​

我希望这能解决你的问题，尽管还有很多其他方法可以做到这一点。

​

我原本以为你指的是只有在所有内容加载完毕后才显示页面，但我会把它留在这里以防万一；

这可以用jquery通过以下代码非常容易地完成

确保在标题中引用jquery，并使用：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

然后将以下内容粘贴到你的html 的头部

<script>
    $('html').hide();
    $(document).ready(function() {
        $('html').show();
    });
</script>

window.onload-<开始的好地方

window.onload = function() { /* do everything */

之后查看jQuery的.show（）并使用css display：none

相关文章：