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

創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站設(shè)計，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十載品質(zhì)，值得信賴！

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

1 gif圖片

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

var tb_pathToImage = "Images/loadingAnimation.gif";
imgLoader = new Image(); //  image對象
    imgLoader.src = tb_pathToImage;
    $("body").append("
"); //page中增加Img
    $('#Image_load').show(); //show loader
    $("body").append("
");  //增加遮罩層

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)度條如何在頁面上顯示成gif圖像就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。