今回はnotesとは何かを紹介します。実際の事例を見てみましょう。
必要な材料:
読み込み中のアニメーションGIF画像
基本ロジック:
モーダルボックスマスク+loading.gifアニメーション、
デフォルトではモーダルボックスは非表示になっています
ページがAjaxリクエストデータの送信を開始すると、モーダルボックスが表示されます
リクエストが完了すると、モーダルボックスは非表示になります
簡単な練習のために、Django を介して新しい Web アプリケーションを作成してみましょう
練習
1. 新しい Django プロジェクトを作成し、アプリケーション app01 を作成し、ルーティングと静的を構成します (省略)。 gif アニメーションを静的フォルダーに配置します。構造は次のとおりです:
2. ビューで関数 を定義し、ページ test.html を返します:
def test(request): return render(request, 'test.html')
nbsp;html> <meta> <title>Title</title> <!-- 导入css样式 --> <link> <!-- 导入jquery 和 js文件 --> <script></script> <script></script> <h1>你好啊,朋友!</h1> <hr> <p> </p><p>正在请求服务器数据....</p> <!-- 模态框部分 --> <p> </p><p></p>
/* 模态框样式 */ .loading { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background-color: black; opacity: 0.4; z-index: 1000; } /* 动图样式 */ .loading .gif { height: 32px; width: 32px; background: url('/static/img/loading.gif'); position: fixed; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; z-index: 1001; }
$(function () { //准备请求数据,显示模态框 $('p.loading').show(); $.ajax({ url: "/ajax_handler.html/", type: 'GET', data: {}, success: function (response) { var content = response.content; $('#content').html(content); //请求完成,隐藏模态框 $('p.loading').hide(); }, error: function () { $('#content').html('server error...'); //请求完成,隐藏模态框 $('p.loading').hide(); } }) });
説明:
ページがロードされると、Ajaxリクエストの送信が開始され、サーバーのajax_handlerビューからデータをリクエストします。このとき、モーダルボックスが表示されます
リクエストが完了すると、成功または失敗に関係なく、モーダルボックスは非表示になります
。
6.ajax_handler ビューは次のとおりです。ネットワーク遅延をシミュレートし、いくつかの文字列を返します:
from django.http import JsonResponse from django.utils.safestring import mark_safe # 取消字符串转义 def ajax_handler(request): # 模拟网络延迟 import time time.sleep(3) msg = ''' XXX ''' # 这里你可以随便放入一些字符串 return JsonResponse({"content": mark_safe(msg)})
効果は以下の通りです:
この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がjs+css により、Web ページを読み込むときのユーザー エクスペリエンスが向上しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。