如何讓偽進度條在頁面上顯示成gif圖像

在工作中為了方便，我們需要加上一些效果，這篇文章就和大家講講偽進度條如何在頁面上顯示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=&#39;Image_load&#39;><img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/282/102/372/1537868158709779.jpg?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;" + imgLoader.src + "&#39; / alt="如何讓偽進度條在頁面上顯示成gif圖像" ></div>"); //page中增加Img
    $(&#39;#Image_load&#39;).show(); //show loader
    $("body").append("<div id=&#39;pageover&#39; class=&#39;pageover_bg&#39; ></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中文網其他相關文章！