ページ上に疑似プログレスバーを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=&#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 中国語 Web サイトの他の関連記事を参照してください。