引导页面加载进度条动画 [英] Bootstrap Page Load Progress bar animation

问题描述

我想有一个页面加载到一个div和而页面加载显示进度条（preferably有点接近页面负载的实际进度），然后该页面后，加载效果基本show酒吧和显示的内容。

事件当前链：

1. 用户点击链接


2. 进度条滑下


3. 进度条的动画以页面加载


4. 进度条上滑


5. 页面内容显示

code：

 功能页面加载（URL）{
    $（身体）的CSS（'光标'，'等待'）。
    $（'＃页面负载包'）了slideDown（）。
    。宽度= $（'＃页面加载指示器'）的CSS（'宽'，'100％'）;
    $（'＃主机'）。负载（URL，函数（）{
        $（'＃页面负载包'）效果基本show（）;
        $（身体）的CSS（'光标'，'默认'）。
    }）;
}
 

1. 我将如何修改此code相匹配的资源负载的实际进展情况？


2. 我怎么能效果基本show股利出现之前的内容？

======= =======编辑

在使用的答案code下面我只是将宽度设置为80％，get函数调用之前
然后在成功呼叫其设置为100％。下滑的DIV向上，然后显示HTML

 功能页面加载（URL）{
                $（身体）的CSS（'光标'，'等待'）。
                $（'＃主机）HTML（''）。
                $（'＃页面负载包'）了slideDown（）。
                $（'＃页面加载指示器'）的CSS（'宽'，'80％'）;                $获得（URL，功能（数据）{
                $（'＃页面加载指示器'）的CSS（'宽'，'100％'）;
                $（'＃页面加载-包装）。效果基本show（'慢'，函数（）{
                    $（'＃主机'）的html（数据）。
                }）;
                $（身体）的CSS（'光标'，'默认'）。
                }）;
            }
 

解决方案

  

我将如何修改此code相匹配的资源负载的实际进展？

您不能只用JavaScript的。

  

我怎么能效果基本show股利出现之前的内容？

使用 $获得，而不是因为它允许你设置内容之前，向上滑动。

 功能页面加载（URL）{
    $（身体）的CSS（'光标'，'等待'）。
    $（'＃页面负载包'）了slideDown（）。
    。宽度= $（'＃页面加载指示器'）的CSS（'宽'，'100％'）;    $获得（URL，功能（数据）{
        $（'＃页面负载包'）效果基本show（）;
        $（身体）的CSS（'光标'，'默认'）。        //并加载HTML
        $（'＃主机'）的html（数据）。
    }）;
}
 

I want to have a page loaded into a div and while the page is loading display a progress bar ( preferably somewhat close to the actual progress of the page load ) and then after the page is loaded slideUp the bar and display the content.

Current chain of events:

1. User Click Links
2. Progress Bar Slides Down
3. Progress Bar Animates to Page Load
4. Progress Bar Slides Up
5. Page Content Displays

Code:

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. How would I modify this code to match the actual progress of the resource load?
2. How can I slideUp the div before the content appears?

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

Using the code in the answer below I just set the width to 80% before the get function call then in the success call set it to 100%. Slid the div Up and then displayed the 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');
                }); 
            }

解决方案

How would I modify this code to match the actual progress of the resource load?

You cant with just javascript.

How can I slideUp the div before the content appears?

Use $.get instead since it allows you to slide up before setting the content:

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);
    }); 
}

这篇关于引导页面加载进度条动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！