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

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

まえがき

ユーザーが AJAX リクエストを行うとき、リクエストの段階でユーザーの応答が返されずに長時間続くと、ユーザーに錯覚を引き起こし、ユーザーが私たちのシステムは「応答なし」と考えられます。これはある意味不親切です。

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

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

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

実装方法

HTML部分:

<p> 
    <img  src="/static/imghwm/default1.png" data-src="images/data-loading.gif" class="lazy" alt="AJAX は読み込みを表示し、レイヤー オクルージョン ページをポップアップします。" > 
</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"); 
  }); 
});

関連する推奨事項:

jQuery Ajax は、入力された検証コードが正しいかどうかを確認するためのチェック番号とエラー番号を表示します

jquery+php+ajax は、複数の画像アップロードのアップロード進行状況を表示し、サムネイルを生成しますコード

JS と CSS は、Web ページ読み込み中のアニメーション効果の共有を実現します

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