Heim > Web-Frontend > js-Tutorial > js+css verbessert die Benutzererfahrung beim Laden von Webseiten

js+css verbessert die Benutzererfahrung beim Laden von Webseiten

php中世界最好的语言
Freigeben: 2018-04-16 13:52:11
Original
1813 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen, was die Vorsichtsmaßnahmen sind. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Benötigte Materialien:

Ein ladendes animiertes GIF-Bild

Grundlegende Logik:

Modal-Box-Maske + Loading.gif-Animation,
Modal-Box standardmäßig ausblenden
Wenn die Seite mit dem Senden von Ajax-Anfragedaten beginnt, wird die Modal-Box angezeigt
Die Anfrage ist abgeschlossen und die Modal-Box ist ausgeblendet

Lassen Sie uns über Django eine neue Webanwendung erstellen, um sie einfach zu üben

Üben

1. Erstellen Sie ein neues Django-Projekt, erstellen Sie die Anwendung app01, konfigurieren Sie Routing und Statik, weggelassen. Platzieren Sie die GIF-Animation im statischen Ordner mit der folgenden Struktur:

js+css verbessert die Benutzererfahrung beim Laden von Webseiten

2. In der Ansicht definiert eine Funktion , die die Seite test.html zurückgibt:

def test(request):
 return render(request, 'test.html')
Nach dem Login kopieren

3. Die test.html-Seite lautet wie folgt:

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>


Nach dem Login kopieren

4. Der CSS-Stil lautet wie folgt:

/* 模态框样式 */
.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;
}
Nach dem Login kopieren

Beschreibung:

  • Durch Festlegen der Position „Fest“ und Festlegen von „oben“, „unten“, „links“ und „rechts“ auf 0 deckt das modale Feld die gesamte Seite ab.

  • Legen Sie das dynamische GIF-Bild als Hintergrund fest und zentrieren Sie es um den Ladeeffekt anzuzeigen;

  • Durch Festlegen des Z-Index-Werts wird das GIF-Bild über dem Modalfeld angezeigt

  • Hintergrundfarbe: Schwarz soll es offensichtlicher machen und kann bei gezielter Verwendung auf Weiß eingestellt werden; 🎜> 5. Die JS-Datei lautet wie folgt:

    Beschreibung:
Nachdem die Seite geladen wurde, beginnt sie mit dem Senden von Ajax-Anfragen und fordert Daten von der Server-Ansicht ajax_handler an. Zu diesem Zeitpunkt wird das modale Feld angezeigt Modalbox ist ausgeblendet

6. Die ajax_handler-Ansicht sieht wie folgt aus: Sie simuliert eine Netzwerkverzögerung und gibt einige Zeichenfolgen zurück:
$(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();
  }
 })
});
Nach dem Login kopieren

Der Effekt ist wie folgt:


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)})
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

js+css verbessert die Benutzererfahrung beim Laden von WebseitenEmpfohlene Lektüre:

js+css verbessert die Benutzererfahrung beim Laden von Webseiten

Das obige ist der detaillierte Inhalt vonjs+css verbessert die Benutzererfahrung beim Laden von Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage