AJAX 表示のロードとレイヤー オクルージョン ページのポップアップの例

AJAX リクエストが非同期であることは誰もが知っています。この非同期メカニズムによりエクスペリエンスが最適化されますが、同時に、ビジネスを処理するためにより完全な思考が必要になります。リクエストを行った後、ユーザーが長時間応答しないのはユーザー エクスペリエンスとして非常に悪いため、AJAX を使用して、リクエスト後に読み込み中とレイヤー オクルージョン ページを表示する実装方法を見てみましょう。 。

前書き

ユーザーが AJAX リクエストを行うとき、リクエストの段階でユーザーの応答が返されずに長時間続くと、ユーザーに錯覚を引き起こすことをすべての開発者は理解する必要があると思います。ユーザーに当社のシステムが「応答しない」と思わせることになります。これはある意味不親切です。

場合によっては、ユーザーが望む結果が得られない場合でもリクエストを続け、それが予期せぬ結果をもたらす可能性があります。

そのため、AJAX リクエストを行う際には、システムの正しい動作と優れたユーザー エクスペリエンスを確保するために、特定の措置を講じます。

ここで私が使用しているのは、読み込み中の画像を表示し、ユーザーが別のリクエストを行うことができないようにレイヤーをポップアップすることです。

実装方法

HTML部分:

<p id="loading" class="loadingp"> 
    <img src="images/data-loading.gif" alt="图片加载中···" /> 
</p>

HTML部分はimgを含むpを配置するだけです。

CSS スタイル:

/*图片加载中p图层，用于遮挡页面*/ 
.loadingp 
{ 
  position:absolute; 
  text-align:center; 
  left:0px; 
  top:0px; 
  z-index:70; 
  background-color:#000000; 
  opacity: 0.7;/*透明#CCCCCC*/ 
  display:none; 
  }   
/*加载中图片*/ 
.loadingp img 
{ 
  position:absolute; 
  left:0px; 
  top:0px; 
  z-index:80; 
  }

スタイル p と img。

JS code

//ajax请求过程中，显示加载中图片并显示图层，请求完成隐藏图片 
$(function () { 
  //注册ajax加载事件 
  $("#loading").ajaxStart(function () { 
    //一个p，用来遮挡页面，请求过程中，不可操作页面 
    var lockwin = $(this); 
    //p占满整个页面 
    lockwin.css("width", "100%"); 
    lockwin.css("display", "block"); 
    lockwin.css("height", $(window).height() + $(window).scrollTop()); 
    //设置图片居中 
    $("#loading img").css("display", "block"); 
    $("#loading img").css("left", ($(window).width() - 88) / 2); 
    $("#loading img").css("top", ($(window).height() + $(window).scrollTop()) / 2); 
  }); 
 
  $("#loading").ajaxStop(function () { 
    //隐藏p 
    var lockwin = $(this); 
    lockwin.css("width", "0"); 
    lockwin.css("display", "none"); 
    lockwin.css("height", "0"); 
    //设置图片隐藏 
    $("#loading img").css("display", "none"); 
  }); 
});

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

OAへのアクセス Ajaxとワークフロープラグインを使用して、人事システムデータに基づいてOAアカウントを追加します(詳細な画像とテキスト説明)

HTMLタグを含むAjax送信パラメータ値は送信できませんメソッド

Lavarelフレームワークでajaxを使用してフォームを送信する方法_AJAX関連

以上がAJAX 表示のロードとレイヤー オクルージョン ページのポップアップの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。