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

2019-01-07

編程之家

https://www.jb51.cc

編程之家收集整理的這篇文章主要介紹了JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果，編程之家小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。

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

需要材料：

一張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)文件夾下，結(jié)構(gòu)如下：

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

3.test.html頁面如下：

Title

@H_502_42@

你好啊，朋友！

正在請求服務器數(shù)據(jù)....

4.CSS樣式如下：

/動圖樣式/

.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，實現(xiàn)模態(tài)框覆蓋整個頁面；

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

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

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

5.JS文件如下：

顯示模態(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)絡(luò)延遲，并返回一些字符串：

def ajax_handler(request):

模擬網(wǎng)絡(luò)延遲

import time

time.sleep(3)

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

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

效果如下：

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持編程之家。

總結(jié)

如果覺得編程之家網(wǎng)站內(nèi)容還不錯，歡迎將編程之家網(wǎng)站推薦給程序員好友。

本圖文內(nèi)容來源于網(wǎng)友網(wǎng)絡(luò)收集整理提供，作為學習參考使用，版權(quán)屬于原作者。

總結(jié)

以上是生活随笔為你收集整理的页面加载中的css,JS+CSS实现网页加载中的动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。