在工作中為了方便，我們需要加上一些效果，這篇文章就和大家講講偽進(jìn)度條如何在頁面上顯示gif圖像，感興趣的朋友可以參考一下，希望可以幫助到你。

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

1 gif圖片

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

var tb_pathToImage = "Images/loadingAnimation.gif";
imgLoader = new Image(); //  image對象
    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();

效果圖：

以上就是如何讓偽進(jìn)度條在頁面上顯示成gif圖像的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！