So stellen Sie sicher, dass der Pseudo-Fortschrittsbalken als GIF-Bild auf der Seite angezeigt wird

Zur Vereinfachung bei der Arbeit müssen wir einige Effekte hinzufügen, um Ihnen zu zeigen, wie Sie ein GIF-Bild mit einem Pseudo-Fortschrittsbalken anzeigen können kann dir helfen.

In einem aktuellen Projekt dauerte es nach dem Klicken auf einen Vorgang etwas länger, da viele Dinge im Hintergrund erledigt wurden. Während dieses Vorgangs sind an der Rezeption keine Änderungen sichtbar. Um zu verhindern, dass Kunden nach dem Klicken auf die Schaltfläche erneut auf die Schaltfläche klicken, wird der Seite nach dem ersten Klicken auf die Schaltfläche ein GIF-Bild hinzugefügt, genau wie bei einem Fortschritt Bar. Nachdem die Funktion abgeschlossen ist, löschen Sie das Bild.

1 GIF-Bild

2 Nach dem Klicken auf die Schaltfläche fügt der Front-End-JS-Code ein IMG-Tag und eine DIV-Ebene zur Maskierung hinzu:

var tb_pathToImage = "Images/loadingAnimation.gif";
imgLoader = new Image(); //  image对象
    imgLoader.src = tb_pathToImage;
    $("body").append("<div id=&#39;Image_load&#39;><img  src=&#39;" + imgLoader.src + "&#39; / alt="So stellen Sie sicher, dass der Pseudo-Fortschrittsbalken als GIF-Bild auf der Seite angezeigt wird" ></div>"); //page中增加Img
    $(&#39;#Image_load&#39;).show(); //show loader
    $("body").append("<div id=&#39;pageover&#39; class=&#39;pageover_bg&#39; ></div>");  //增加遮罩层

3 Fügen Sie außerdem den entsprechenden CSS-Code hinzu:

.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 Nachdem die Schaltflächenereignisantwort abgeschlossen ist, entfernen Sie die IMG- und DIV-Ebenen

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

Rendering:

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass der Pseudo-Fortschrittsbalken als GIF-Bild auf der Seite angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!