How to make the pseudo progress bar display as a gif image on the page

For convenience at work, we need to add some effects. This article will tell you how to display a gif image on the page with a pseudo progress bar. Friends who are interested can refer to it. I hope it can help. you.

In a recent project, after clicking on an operation, it took a little longer because there were more things done in the background. During this process, no changes can be seen at the front desk. In order to prevent customers from clicking the button again after clicking it, a gif image is added to the page after clicking the button for the first time, just like a progress bar. After the function is completed, delete the image.

1 gif image

2 After clicking the button, the front-end JS code adds an img tag and a DIV layer for masking:

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="How to make the pseudo progress bar display as a gif image on the page" ></div>"); //page中增加Img
    $(&#39;#Image_load&#39;).show(); //show loader
    $("body").append("<div id=&#39;pageover&#39; class=&#39;pageover_bg&#39; ></div>");  //增加遮罩层

3 Also add the corresponding CSS code:

.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 After the button event response is completed, remove the IMG and DIV layers

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

Rendering:

The above is the detailed content of How to make the pseudo progress bar display as a gif image on the page. For more information, please follow other related articles on the PHP Chinese website!