Comment afficher la pseudo barre de progression sous forme d'image GIF sur la page

Pour plus de commodité au travail, nous devons ajouter quelques effets. Cet article vous expliquera comment afficher une image gif sur la page avec une pseudo barre de progression. J'espère que les amis intéressés pourront s'y référer. peut vous aider.

Dans un projet récent, après avoir cliqué sur une opération, cela prenait un peu plus de temps car il y avait beaucoup de choses faites en arrière-plan. Au cours de ce processus, aucun changement n'est visible à la réception. Afin d'empêcher les clients de cliquer à nouveau sur le bouton après avoir cliqué sur le bouton, une image GIF est ajoutée à la page après avoir cliqué sur le bouton pour la première fois, tout comme une progression. bar. Une fois la fonction terminée, supprimez l'image.

1 image gif

2 Après avoir cliqué sur le bouton, le code JS frontal ajoute une balise img et un calque DIV pour le masquage :

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/imghw/default1.png"  data-src="https://img.php.cn//upload/image/282/102/372/1537868158709779.jpg"  class="lazy"  src=&#39;" + imgLoader.src + "&#39; / alt="Comment afficher la pseudo barre de progression sous forme d'image GIF sur la 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 Ajoutez également le code CSS correspondant :

.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 Une fois la réponse à l'événement du bouton terminée, supprimez les couches IMG et DIV

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

Rendu :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!