Question

这似乎是一个基本问题。

我有一个轻量级的网站，并希望立即加载整个页面，以便链接到网站的主页/联系人/ ...部分将花费时间加载。

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

Answer 1

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

Answer 2

我已经设置了一个基本的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>

Answer 3

window.onload - ＆lt;一个好的起点

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

然后查看jQuery的。show（）并使用css display：none

加载整页

3 个答案: