當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
通过JS和CSS，实现网页加载中的动画效果
生活随笔
收集整理的這篇文章主要介紹了
通过JS和CSS，实现网页加载中的动画效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
需要材料：
一張loading動(dòng)畫的gif圖片
基本邏輯：
下面我們通過Django新建一個(gè)web應(yīng)用，來簡單實(shí)踐下
實(shí)踐
新建一個(gè)Django項(xiàng)目，創(chuàng)建應(yīng)用app01, 配置好路由和static，略。將gif動(dòng)圖放到靜態(tài)文件夾下，結(jié)構(gòu)如下：
視圖中定義一個(gè)函數(shù)，它返回頁面test.html：
def test(request):return render(request, 'test.html')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"><!-- 導(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><div id="content"><p>正在請求服務(wù)器數(shù)據(jù)....</p> </div><!-- 模態(tài)框部分 --> <div class="loading hide"><div class="gif"></div> </div></body> </html>CSS樣式如下：
/* 模態(tài)框樣式 */ .loading {position: fixed;top: 0;bottom: 0;right: 0;left: 0;background-color: black;opacity: 0.4;z-index: 1000; }/* 動(dòng)圖樣式 */ .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; }說明：
JS文件如下：
$(function () {//準(zhǔn)備請求數(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();}}) });說明：
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 timetime.sleep(3)msg = ''' XXX ''' # 這里你可以隨便放入一些字符串return JsonResponse({"content": mark_safe(msg)})效果如下：
如果顯示不了gif動(dòng)圖，可能是瀏覽器緩存問題。項(xiàng)目完整代碼在這里：https://github.com/Ayhan-Huang/Loading
總結(jié)
以上是生活随笔為你收集整理的通过JS和CSS，实现网页加载中的动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SCCM 2012 SP1系列（九）配置
- 下一篇： Spring Data JPA 教程（翻