Question

我想在我的项目中模仿apple's pages行为之一（最好在FF，Chrome，Safari上观看）：

在第一时间页面为空，除了标题 - 但页面的高度已经设置为所有将加载的最终高度，因此浏览器滚动条不会更改。 / LI>
页面元素（主横幅，中等横幅，最后横幅，页脚等）以平滑淡入的方式从上到下逐一显示。

这两件事使得页面加载看起来非常流畅和令人惊叹。

一般来说，这就是我的页面的样子：

<header></header>
<div id="content>
     <div id="mainImage"></div>
     <div id="gallery"></div>
     <div id="info"></div> 
</div>
<footer></footer>

我猜测苹果是如何做到的，但我不确定：

所有页面都已完全加载，但所有页面都在opacity:0中，之后只有一个脚本逐个动画每个元素的外观。我认为效率不高。
所有页面都是基于每个部分的ajax调用构建的：当它完成加载时，它将出现。这也不合适，因为它们总是从上到下而不是首先出现。他们如何在开始时计算页面的高度。

我很乐意接受各种想法，并且能够使代码更易于使用，从而使代码更加高效和通用。

任何想法？

Answer 1

苹果网站使用scriptaculous。他们的网页可以免费下载图书馆和文档。

Answer 2

你可以按照你想要的顺序使用jquery和淡入每个元素，并在你的回调中淡入下一个元素。

http://jsfiddle.net/lucuma/Pd7We/

$('#nav').fadeIn(500,function() {
    $('#main').fadeIn(1000,function() {
       $('#footer').fadeIn(1000);     
    });
});

Answer 3

这样的事情怎么样：

jQuery(function ($) {
    $('.loading').show();
    $('.main').hide();
});
$(document).on('load', function () {
    $('.main').fadeIn(500);
    $('.loading').hide();
});

如何将网页加载到尽可能好的和平滑的状态

3 个答案: