js+css完善網(wǎng)頁加載時的用戶體驗(yàn)

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:54:46

js+css完善網(wǎng)頁加載時的用戶體驗(yàn)

js+css完善網(wǎng)頁加載時的用戶體驗(yàn):這次給大家?guī)?，的注意事?xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。需要材料：一張loading動畫的gif圖片基本邏輯：模態(tài)框遮罩 + loading.gif動圖，默認(rèn)隱藏模態(tài)框頁面開始發(fā)送Ajax請求數(shù)據(jù)時，顯示模態(tài)框請求完成，隱藏模態(tài)框下面我們通過Djang

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js+css完善網(wǎng)頁加載時的用戶體驗(yàn):這次給大家?guī)?，的注意事?xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。需要材料：一張loading動畫的gif圖片基本邏輯：模態(tài)框遮罩 + loading.gif動圖，默認(rèn)隱藏模態(tài)框頁面開始發(fā)送Ajax請求數(shù)據(jù)時，顯示模態(tài)框請求完成，隱藏模態(tài)框下面我們通過Djang

這次給大家?guī)?，的注意事?xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

需要材料：

一張loading動畫的gif圖片

基本邏輯：

模態(tài)框遮罩 + loading.gif動圖，
默認(rèn)隱藏模態(tài)框
頁面開始發(fā)送Ajax請求數(shù)據(jù)時，顯示模態(tài)框
請求完成，隱藏模態(tài)框

下面我們通過Django新建一個web應(yīng)用，來簡單實(shí)踐下

實(shí)踐

1.新建一個Django項(xiàng)目，創(chuàng)建應(yīng)用app01, 配置好路由和static，略。將gif動圖放到靜態(tài)文件夾下，結(jié)構(gòu)如下：

QQ截圖20180416134931.png

2.視圖中定義一個函數(shù)，它返回頁面test.html：

def test(request):
 return render(request, 'test.html')

3.test.html頁面如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 導(dǎo)入css樣式 -->
 <link rel="stylesheet" href="/static/css/loading.css" rel="external nofollow" >
 <!-- 導(dǎo)入jquery 和 js文件 -->
 <script src="/static/plugins/jquery-3.2.1.js"></script>
 <script src="/static/js/loading.js"></script>
</head>
<body>
<h1>你好啊，朋友！</h1>
<hr>
<p id="content">
 <p>正在請求服務(wù)器數(shù)據(jù)....</p>
</p>
<!-- 模態(tài)框部分 -->
<p class="loading hide">
 <p class="gif"></p>
</p>
</body>
</html>

4.CSS樣式如下：

/* 模態(tài)框樣式 */
.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;
}

說明：

通過設(shè)置position: fixed，并令上下左右為0，實(shí)現(xiàn)模態(tài)框覆蓋整個頁面；

設(shè)置gif動態(tài)圖為背景，居中，來顯示加載效果；

通過設(shè)置z-index值，令gif圖懸浮在模態(tài)框上面；

background-color: black;是為了看著明顯，具體使用時可以設(shè)為white;

5.JS文件如下：

$(function () {
 //準(zhǔn)備請求數(shù)據(jù)，顯示模態(tài)框
 $('p.loading').show();
 $.ajax({
 url: "/ajax_handler.html/",
 type: 'GET',
 data: {},
 success: function (response) {
 var content = response.content;
 $('#content').html(content);
 //請求完成，隱藏模態(tài)框
 $('p.loading').hide();
 },
 error: function () {
 $('#content').html('server error...');
 //請求完成，隱藏模態(tài)框
 $('p.loading').hide();
 }
 })
});

說明：

頁面載入后，開始發(fā)送Ajax請求，從服務(wù)端ajax_handler視圖請求數(shù)據(jù)，這時顯示模態(tài)框
請求完成后，不論成功與否，隱藏模態(tài)框

6.ajax_handler視圖如下，它模擬網(wǎng)絡(luò)延遲，并返回一些字符串：

from django.http import JsonResponse
from django.utils.safestring import mark_safe # 取消字符串轉(zhuǎn)義
def ajax_handler(request):
 # 模擬網(wǎng)絡(luò)延遲
 import time
 time.sleep(3)
 msg = ''' XXX ''' # 這里你可以隨便放入一些字符串
 return JsonResponse({"content": mark_safe(msg)})

效果如下：

QQ截圖20180416134943.png