AJAX は読み込みを表示し、レイヤーオクルージョンページをポップアップします。-PHPチュートリアル-php.cn

AJAX は読み込みを表示し、レイヤーオクルージョンページをポップアップします。

小云云

リリース： 2023-03-19 12:08:01

オリジナル

2073 人が閲覧しました

この記事では、主に 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 コード

//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"); 
  }); 
});

ログイン後にコピー