當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
通过JS和CSS，实现网页加载中的动画效果
生活随笔
收集整理的這篇文章主要介紹了
通过JS和CSS，实现网页加载中的动画效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需要材料：
一張loading動畫的gif圖片
基本邏輯：
下面我們通過Django新建一個web應用，來簡單實踐下
實踐
新建一個Django項目，創建應用app01, 配置好路由和static，略。將gif動圖放到靜態文件夾下，結構如下：
視圖中定義一個函數，它返回頁面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><!-- 導入css樣式 --><link rel="stylesheet" href="/static/css/loading.css"><!-- 導入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>正在請求服務器數據....</p> </div><!-- 模態框部分 --> <div class="loading hide"><div class="gif"></div> </div></body> </html>CSS樣式如下：
/* 模態框樣式 */ .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; }說明：
JS文件如下：
$(function () {//準備請求數據，顯示模態框$('div.loading').show();$.ajax({url: "/ajax_handler.html/",type: 'GET',data: {},success: function (response) {var content = response.content;$('#content').html(content);//請求完成，隱藏模態框$('div.loading').hide();},error: function () {$('#content').html('server error...');//請求完成，隱藏模態框$('div.loading').hide();}}) });說明：
ajax_handler視圖如下，它模擬網絡延遲，并返回一些字符串：
from django.http import JsonResponse from django.utils.safestring import mark_safe # 取消字符串轉義def ajax_handler(request):# 模擬網絡延遲import timetime.sleep(3)msg = ''' XXX ''' # 這里你可以隨便放入一些字符串return JsonResponse({"content": mark_safe(msg)})效果如下：
如果顯示不了gif動圖，可能是瀏覽器緩存問題。項目完整代碼在這里：https://github.com/Ayhan-Huang/Loading
總結
以上是生活随笔為你收集整理的通过JS和CSS，实现网页加载中的动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SCCM 2012 SP1系列（九）配置
- 下一篇： Java知识点汇总1