在同步ajax运行时使用svg / gif创建一个加载器

时间:2017-06-06 09:45:34

标签: javascript jquery ajax

Sup人,我有一个关于ajax的问题​​。

如果我是对的,以同步方式使用ajax(async = false), 在ajax运行时,浏览器将被锁定。 所以我把ajax像1ms一样的时间用来首先显示装载机,但这就是问题所在。我的加载器基于svg文件,这是一个简单的旋转图像,即使我在ajax函数上计时,当ajax启动时,整个图像也会冻结。

有没有办法让图像移动?我真的需要做这个工作 让用户知道事情正在发展。

谢谢你。

:)好吧我编辑了。我添加了一些源代码

javascript部分:

function ajaxAddrInfo(result){
//console.log("결과 값");
//console.log(daum_local);
//console.log(result[0].bcode);
sigunCd = result[0].bcode.substring(0, 5);
dongCd = result[0].bcode.substring(5, 11);
bun = result[0].jibunAddress.bunji;
ji = result[0].jibunAddress.ho;
daum_local = "";

openBgOnly();
setTimeout(function(){
    $.ajax({
    url: './assets/php/detail.php',
    type: 'post',
    async: false,
    data: {
        S_CD: sigunCd,
        D_CD: dongCd,
        BUN: bun, JI: ji, FLR: fsum,
        CNT: Bcnt,LCNT:Lcnt,
        TYPE: "Building_Count"
    },
    success:function(data){
        //console.log("working?");
        var BcntRes = JSON.parse(data);
        Bcnt = BcntRes['body']['totalCount'];
        //showResult(resf);
    },
    error: function(error){
        alert("BUILDING FLOOR SEARCH ERROR");
    },

});//ajax ends.

},1);   

//표제부

setTimeout(function(){
    $.ajax({
    url: './assets/php/detail.php',
    type: 'post',
    async: false,
    data: {
        S_CD: sigunCd,
        D_CD: dongCd,
        BUN: bun, JI: ji, FLR: fsum,
        CNT: Bcnt,LCNT:Lcnt,
        TYPE: "Building_Info"
    },
    success:function(data){

        closeBg();

        var res = JSON.parse(data);
        BinfoRes = res;
        var len = res['body']['totalCount'];

        if(len === 0){
            alert("건축물 데이터가 없습니다.");
        }
        else if(len === 1){
            fsum = Number(res['body']['items']['item']['grndFlrCnt']);
            fsum += Number(res['body']['items']['item']['ugrndFlrCnt']);
        }
        else{
            //console.log(res);

            fsum = Number(res['body']['items']['item']['grndFlrCnt']);
            fsum += Number(res['body']['items']['item']['ugrndFlrCnt']);
            //console.log(fsum);
        }
        //showResult(res);

        //showResult(res);  
        $.ajax({
            url: './assets/php/detail.php',
            type: 'post',
            async: false,
            data: {
                S_CD: sigunCd,
                D_CD: dongCd,
                BUN: bun, JI: ji, FLR: fsum,
                CNT: Bcnt,LCNT:Lcnt,
                TYPE: "Building_Level_Count"
            },
            success:function(data){
                //console.log("working?");
                //console.log(data);
                LcntRes = JSON.parse(data);
                Lcnt = LcntRes['body']['totalCount'];
                //console.log(Lcnt);
                //showResult(resf); 
            },
            error: function(error){
                alert("BUILDING FLOOR SEARCH ERROR");
            },
            complete:function(){

            }               
        }); 


        $.ajax({
            url: './assets/php/detail.php',
            type: 'post',
            async: false,
            data: {
                S_CD: sigunCd,
                D_CD: dongCd,
                BUN: bun, JI: ji, FLR: fsum,
                CNT: Bcnt,LCNT:Lcnt,
                TYPE: "Building_Level_Info"
            },
            success:function(data){
                //console.log("working?");
                //console.log(data);
                resfloor = JSON.parse(data);

                //showResult(resf); 
            },
            error: function(error){
                alert("BUILDING FLOOR SEARCH ERROR");
            },
            complete:function(){

            }               
        }); 


        B_List(res);
    },
    error: function(error){
        alert("BUILDING SEARCH ERROR");

    },
    complete:function(){

    }               
});
},1);
//층별
//setTimeout(closeLoading(),1500);

}

html部分:

<div id="loading_background" class="text-center"><p id="loading_content"><img src="./assets/img/loader.svg" class="put-img-center"><h3>로딩중...</h3></p></div>

0 个答案:

没有答案