本文介绍了引导页面加载进度条动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想有一个页面加载到一个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('光标','默认')。
                });
            }


解决方案

You cant with just javascript.

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

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

08-18 20:43
查看更多