JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果

本文實例為大家分享了JS實現(xiàn)網(wǎng)頁加載中效果的具體代碼，供大家參考，具體內(nèi)容如下

目前創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)絡空間、網(wǎng)站托管運營、企業(yè)網(wǎng)站設計、牡丹江網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

需要材料：

一張loading動畫的gif圖片

基本邏輯：

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

下面我們通過Django新建一個web應用，來簡單實踐下

實踐

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

JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果

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>
 <!-- 導入css樣式 -->
 <link rel="stylesheet" href="/static/css/loading.css" rel="external nofollow" >
 <!-- 導入jquery 和 js文件 -->
 <script src="/static/plugins/jquery-3.2.1.js"></script>
 <script src="/static/js/loading.js"></script>
</head>
<body>

<h2>你好啊，朋友！</h2>
<hr>

<div id="content">
 <p>正在請求服務器數(shù)據(jù)....</p>
</div>

<!-- 模態(tài)框部分 -->
<div class="loading hide">
 <div class="gif"></div>
</div>

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

說明：

  • 通過設置position: fixed，并令上下左右為0，實現(xiàn)模態(tài)框覆蓋整個頁面；
  • 設置gif動態(tài)圖為背景，居中，來顯示加載效果；
  • 通過設置z-index值，令gif圖懸浮在模態(tài)框上面；
  • background-color: black;是為了看著明顯，具體使用時可以設為white;

5.JS文件如下：

$(function () {
 //準備請求數(shù)據(jù)，顯示模態(tài)框
 $('div.loading').show();

 $.ajax({
  url: "/ajax_handler.html/",
  type: 'GET',
  data: {},
  success: function (response) {
   var content = response.content;
   $('#content').html(content);

   //請求完成，隱藏模態(tài)框
   $('div.loading').hide();
  },
  error: function () {
   $('#content').html('server error...');

   //請求完成，隱藏模態(tài)框
   $('div.loading').hide();
  }
 })
});

說明：

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

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

from django.http import JsonResponse
from django.utils.safestring import mark_safe # 取消字符串轉義

def ajax_handler(request):
 # 模擬網(wǎng)絡延遲
 import time
 time.sleep(3)

 msg = ''' XXX ''' # 這里你可以隨便放入一些字符串

 return JsonResponse({"content": mark_safe(msg)})

效果如下：

JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果

JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果

如果顯示不了gif動圖，可能是瀏覽器緩存問題。項目完整代碼在這里：https://github.com/Ayhan-Huang/Loading

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當前名稱：JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果
標題鏈接：http://muchs.cn/article22/ghiscc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、品牌網(wǎng)站制作、網(wǎng)站營銷、建站公司、App開發(fā)、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站