在工作中為了方便，我們需要加上一些效果，這篇文章就和大家講講偽進度條如何在頁面上顯示gif圖像，有興趣的朋友可以參考一下，希望可以幫助到你。
最近做的一個專案中，點擊某個操作後，由於後台做的事情比較多，花的時間比較久一點。而這個過程中前台又看不出一點變化，為了防止客戶點擊後再次點擊該按鈕，就在第一次點擊按鈕後，在頁面上加了一個gif圖片，就像進度條一樣。功能完成後，再把該圖片去掉。
1 gif圖片
2 點選按鈕後，前台JS程式碼，增加img標籤及一個用來遮罩的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 + "' / alt="如何讓偽進度條在頁面上顯示成gif圖像" ></div>"); //page中增加Img
$('#Image_load').show(); //show loader
$("body").append("<div id='pageover' class='pageover_bg' ></div>"); //增加遮罩层3 還要增加對應的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 按鈕事件回應完成後，再移去IMG和DIV層
$('#Image_load').remove();
$('#pageover').remove();效果圖：
以上是如何讓偽進度條在頁面上顯示成gif圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章！
