引导页面加载进度条动画

Question

我希望将一个页面加载到div中，在页面加载时显示一个进度条(最好是接近页面加载的实际进度)，然后在加载页面之后，slideUp该条并显示内容。

当前的一系列事件：

1. 用户单击“链接
2. 进度栏”滑下
3. 进度栏动画以页面加载
4. 进度栏幻灯片显示
5. 页面内容显示H 210G 211

代码：

function pageLoad(url){
    $('body').css('cursor','wait');
    $('#page-load-wrap').slideDown();
    width = $('#page-load-indicator').css('width','100%');
    $('#mainframe').load(url,function(){
        $('#page-load-wrap').slideUp();
        $('body').css('cursor','default');
    }); 
}

1. 如何修改此代码以匹配资源加载的实际进度？
2. 如何在内容出现之前对div进行slideUp？

=======EDIT=======

使用下面答案中的代码，我只是在get函数调用之前将宽度设置为80%，然后在成功调用中将其设置为100%。将div向上滑动，然后显示html。

       function pageLoad(url){
                $('body').css('cursor','wait');
                $('#mainframe').html('');
                $('#page-load-wrap').slideDown();
                $('#page-load-indicator').css('width','80%');

                $.get(url,function(data){
                $('#page-load-indicator').css('width','100%');
                $('#page-load-wrap').slideUp('slow',function(){
                    $('#mainframe').html(data);
                });
                $('body').css('cursor','default');
                }); 
            }

Answer 1

如何修改此代码以与资源加载的实际进度相匹配？

你不能只使用javascript。

，在内容出现之前，我如何才能slideUp这个div？

使用$.get代替，因为它允许您在设置内容之前滑动：

function pageLoad(url){
    $('body').css('cursor','wait');
    $('#page-load-wrap').slideDown();
    width = $('#page-load-indicator').css('width','100%');

    $.get(url,function(data){
        $('#page-load-wrap').slideUp();
        $('body').css('cursor','default');

        // and load the html
        $('#mainframe').html(data);
    }); 
}