自定義遮罩和加載中動畫
圖片也可以使用GIF。

JS部分

    //開啟遮罩
    openMask : function() {
        //console.log("openMask");
        var div = document.createElement("div");
        div.id = "myMask";
        document.getElementsByTagName("body")[0].appendChild(div);
        var $mask = $("#myMask");
        $mask.css("position", "fixed");
        $mask.css("top", "0");
        $mask.css("right", "0");
        $mask.css("bottom", "0");
        $mask.css("left", "0");
        $mask.css("z-index", "1000");
        $mask.css("background-color", "rgba(0,0,0,0.3)");
        $mask.hasClass("glass");
        var $mask = $("#myMask");
        $mask.show();
        $mask.bind( "touchmove", function (e) {
            e.preventDefault();
            if(isIos()){
                window.event.returnValue = false; 
            }
        });
    },
    //關閉遮罩
    closeMask : function() {
        //console.log("closeMask");
        var $mask = $("#myMask");
        $mask.hide();
    },
    //loading加載中遮罩
    loading : function(myMask, loading) {
        //console.log("loading");
        myCommon.openMask();
        var img = document.createElement("img");
        img.id = "loading";
        img.alt = "加載中";
        img.src = "../../img/picVideo/pull_fresh.png";
        var $mask = $("#myMask");
        $mask.append(img).css("z-index", "1000");
        var $child = $("#loading");
        $child.css("position", "absolute").css("z-index", "1001").css("margin-top", "0");
        var dWidth = myCommon.wWidth;
        var dHeight = myCommon.wHeight;
        var iWidth = $child.width();
        var iHeight = $child.height();
        var diffW = (dWidth - iWidth) / 2;
        var diffH = (dHeight - iHeight) / 2 - iHeight;
        $child.css("top", diffH).css("left", diffW);
    },
    //關閉加載中遮罩
    closeLoading : function() {
        //console.log("closeLoading");
        var $mask = $("#myMask");
        $mask.remove();
    }

CSS部分

    /*加載中————開始*/
    #loading {
        width: 50px;
        height: 50px;
        animation: rotation 1s linear 0s infinite;
        /* Firefox: */
        -moz-animation: rotation 1s linear 0s infinite;
        /* Safari and Chrome: */
        -webkit-animation: rotation 1s linear 0s infinite;
        /* Opera: */
        -o-animation: rotation 1s linear 0s infinite;
    }
    @keyframes rotation {
        0%   {
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);        /* IE 9 */
            -webkit-transform: rotate(0deg);    /* Safari and Chrome */
            -o-transform: rotate(0deg);     /* Opera */
            -moz-transform: rotate(0deg);       /* Firefox */
        }
        100% {
            transform: rotate(3600deg);
            -ms-transform: rotate(360deg);      /* IE 9 */
            -webkit-transform: rotate(360deg);  /* Safari and Chrome */
            -o-transform: rotate(360deg);       /* Opera */
            -moz-transform: rotate(360deg);     /* Firefox */
        }
    }
    /*加載中————結束*/