怎样让整个项目在未加载时出现转圈圈的效果

bex5chuxuezhe

今天要给系统做一个转圈圈的效果，我把/UI2/system/lib/base/baas.js替换为自己的bass,我的bass是这样写的define(function(require) {        var $ = require("jquery");
        var Util = require("./util");
        // var Spinner = require("$UI/test/test/spin.min");
        // require("$UI/test/test/zepto.min");
        require("$UI/system/lib/jquery/PerfectLoad");
        require("css!$UI/system/lib/layer/skin/default/layer").load();
        var layer = require("$UI/system/lib/layer/layer");
        // 增加url中如果包含'http://'和'https://'不再增加baseUrl
        var getUrl = function(baseUrl, url, action) {
                if (0 === url.indexOf('http://') || 0 === url.indexOf('https://'))
                        baseUrl = '';
                return baseUrl + url + "/" + action;
        };

        var baas = {
                BASE_URL : "/baas",

                /**
                 * options = { "async" : 是否异步请求，默认false "url" : 服务端请求地址，不包含BASE_URL
                 * "action" : 动作标识 "params" : 动作对应的参数 "success" :
                 * 请求成功后的回调，参数(resultData, xhr) "error" : 请求失败后的回调，参数(msg, xhr) }
                 */
                sendRequest : function(options) {
                        debugger;
                        var self = this;
                        var label = "正在获取数据，请稍候..."
                        try {
                                label = options.label;
                        } catch (e) {
                                label = "正在获取数据，请稍候..."
                        }
                        if (options.async == true) {
                                $.bootstrapLoading.start({
                                        loadingTips : label
                                });
                                setTimeout(function() {
                                        $.bootstrapLoading.end()
                                }, 600000)
                        }
debugger
                        return $.ajax({
                                "type" : "post",
                                "async" : options.async ? options.async : false,
                                "dataType" : "json",
                                "timeout" : 600000, // 超时时间设置，单位毫秒
                                "contentType" : "application/json",
                                "url" : getUrl(options.baseUrl || this.BASE_URL, options.url, options.action),
                                "data" : JSON.stringify(options.params),
                                "complete" : function(xhr, status) {
                                        if (xhr.readyState == 4 && xhr.status == 200) {
                                                if (options.success) {
                                                        options.success.call(this, xhr.responseJSON, xhr);
                                                }
                                        } else {
                                                var msg = self.getErrorMsg(xhr);
                                                if (options.error) {
                                                        options.error.call(this, msg, xhr);
                                                } else {
                                                        // self.showError(msg);
                                                }
                                        }
                                        if (options.async == true) {
                                                $.bootstrapLoading.end();
                                        }
                                        if (status == 'timeout') {// 超时,status还有success,error等值的情况
                                                xhr.abort(); // 超时后中断请求
                                                layer.msg("网络连接超时，请检查网络");
                                                // $.bootstrapLoading.end();
                                        }
                                }
                        });
                },

                getErrorMsg : function(xhr) {
                        return $(xhr.responseText).filter("h1:first").text() || xhr.statusText;
                },

                showError : function(msg) {
                        Util.hint(msg, {
                                "type" : "danger",
                                delay : 10000
                        });
                },

                getDataColumns : function(data) {
                        var columns = {};
                        $.each(data.defCols, function(key) {
                                columns[key] = {
                                        "name" : data.defCols[key]["name"],
                                        "type" : data.defCols[key]["type"]
                                };
                        });
                        return columns;
                }

        };

        return baas;
});

并且运行了tools下的dist.bat，将自己写的js放在/UI2/system/lib/jquery/PerfectLoad.js路径下，图片路径/UI2/system/images/loading.gif，下面是我的js代码
jQuery.bootstrapLoading = {
        start : function(options) {
                var defaults = {
                        opacity : 1,
                        // loading页面透明度
                        backgroundColor : "transparent",
                        // loading页面背景色
                        borderColor : "#bbb",
                        // 提示边框颜色
                        borderWidth : 1,
                        // 提示边框宽度
                        borderStyle : "solid",
                        // 提示边框样式
                        loadingTips : "Loading, please wait...",
                        // 提示文本
                        TipsColor : "#666",
                        // 提示颜色
                        delayTime : 1000,
                        // 页面加载完成后，加载页面渐出速度
                        zindex : 999,
                        // loading页面层次
                        sleep : 0
                // 设置挂起,等于0时则无需挂起

                }
               
                $("#loadingPage").remove();
                var options = $.extend(defaults, options);

                // 获取页面宽高
                var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth;
                // 在页面未加载完毕之前显示的loading Html自定义内容
                var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:' + _PageHeight + 'px;background:' + options.backgroundColor + '; opacity:'
                                + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex
                                + ';"><div id="loadingTips" style="position: absolute; cursor1: wait; width: 100px;border-color:#222222;border-style:' + options.borderStyle + ';border-width:' + options.borderWidth
                                + 'px; height:100px; line-height:60px; padding-left:60px; padding-right: 5px;border-radius:10px;  background:#222222 url(../../images/loading.gif) no-repeat center center; color:'
                                + options.TipsColor + ';font-size:15px;"></div></div>';

                // 呈现loading效果
                $("body").append(_LoadingHtml);

                // 获取loading提示框宽高
                var _LoadingTipsH = document.getElementById("loadingTips").clientHeight, _LoadingTipsW = document.getElementById("loadingTips").clientWidth;

                // 计算距离，让loading提示框保持在屏幕上下左右居中
                var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0, _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;
                $("#loadingTips").css({
                        "left" : _LoadingLeft + "px",
                        "top" : _LoadingTop + "px"
                });

                // 监听页面加载状态
                document.onreadystatechange = PageLoaded;

                // 当页面加载完成后执行
                function PageLoaded() {
                        if (document.readyState == "complete") {
                                var loadingMask = $('#loadingPage');

                                setTimeout(function() {
                                        loadingMask.animate({
                                                "opacity" : 0
                                        }, options.delayTime, function() {
                                                $(this).hide();

                                        });

                                }, options.sleep);

                        }
                }
        },
        end : function() {
                $("#loadingPage").remove();
        }
}

写完之后在页面没有出现转圈圈的效果，求指点

jishuang

用的是baas吗？
Bex5中不会用baas

Bex5中默认的发请求就会有loadingbar进度条，如果要修改为转圈的效果，可以修loadingbar的样式
/UI2/system/components/justep/loadingBar/loadingBar.js中可以看出调用的样式

bex5chuxuezhe

我看看

bex5chuxuezhe

求具体代码，我的是一张放在images下的GIF图片

jishuang

http://docs.wex5.com/wex5-ui-question-list-2107/