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 コード

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

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらにエキサイティングな内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Ajax を使用してジャンプ ページへのリクエストを投稿する方法

Ajax を使用して人事システム データに基づいて OA アカウントを追加する方法

以上がAjax オペレーション レイヤー オクルージョン ページの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。