偽進(jìn)度條如何在頁(yè)面上顯示成gif圖像

這篇文章將為大家詳細(xì)講解有關(guān)偽進(jìn)度條如何在頁(yè)面上顯示成gif圖像，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

最近做的一個(gè)項(xiàng)目中，點(diǎn)擊某個(gè)操作后，由于后臺(tái)做的事情比較多，花的時(shí)間比較久一點(diǎn)。而這個(gè)過程中前臺(tái)又看不出一點(diǎn)變化，為了防止客戶點(diǎn)擊后再次點(diǎn)擊該按鈕，就在第一次點(diǎn)擊按鈕后，在頁(yè)面上加了一個(gè)gif圖片，就像進(jìn)度條一樣。功能完成后，再把該圖片去掉。

1 gif圖片

2 點(diǎn)擊按鈕后，前臺(tái)JS代碼，增加img標(biāo)簽及一個(gè)用來遮罩的DIV層：

var tb_pathToImage = "Images/loadingAnimation.gif";
imgLoader = new Image(); //  image對(duì)象
    imgLoader.src = tb_pathToImage;
    $("body").append("<div id='Image_load'><img src='" + imgLoader.src + "' /></div>"); //page中增加Img
    $('#Image_load').show(); //show loader
    $("body").append("<div id='pageover' class='pageover_bg' ></div>");  //增加遮罩層

3 還要增加相應(yīng)的CSS代碼：

.pageover_bg {	
        background-color:#000;
    	filter:alpha(opacity=75);	
    	-moz-opacity: 0.75;	
    	opacity: 0.75;	
    	}	
 #Image_load{	
     position: fixed;	
     display:none;	
     height:13px;	
     width:208px;	
     z-index:103;	
     top: 50%;	
     left: 50%;	
     margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */	
     }

4 按鈕事件響應(yīng)完成后，再移去IMG和DIV層

$('#Image_load').remove();           
        $('#pageover').remove();

效果圖：

關(guān)于偽進(jìn)度條如何在頁(yè)面上顯示成gif圖像就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。