JS CSS在网页加载中实现动画效果

这个例子分享了JS实现网页加载效果的具体代码，供大家参考。具体内容如下

所需材料：

加载动画的gif图片

基本逻辑：

Modal box mask loading.gif动画，当默认的hide Modal box页面开始发送Ajax请求数据时，显示modal box请求完成，modal box被隐藏

为了简单起见，让我们通过Django创建一个新的web应用程序

实践

1.创建一个新的Django项目，创建应用程序app01，并配置路由和静态。将gif动画放在静态文件夹中，结构如下：

2.在视图中定义一个函数，返回页面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='样式表' href='/static/CSS/loading . CSS ' rel=' external nofollow '！-导入jquery和js文件-脚本src=' http :/static/plugins/jquery-3 . 2 . 1 . js '/脚本脚本src=' http 3360/static/js/loading . js '/脚本/head dyh 1你好，我的朋友！/h1 HR div id=' content ' pRequesting服务器数据./p/div！-模式框部分-div class=' loading hide ' div class=' gif '/div/div/body/html 4。CSS样式如下：

/*模式框样式*/。加载{位置：固定；top : 0；bottom : 0；right : 0；left : 0；背景-颜色：黑色；opacity: 0.4z-index : 1000；}/*动画风格*/。装货。gif { height: 32px宽度： 32px；background : URL('/static/img/loading . gif ')；位置：固定；左侧：50%；top : 50%；左边距：-16px；边距-top :-16px；z-index : 1001；}描述：

通过将position:设置为固定，并使上、下、左、右为0，模态框覆盖整个页面；设置gif动画为背景和中心显示加载效果；通过设置z索引值，gif图像被悬挂在模态框上；背景-颜色：黑色；就是看起来很明显，用的时候可以设置成白色；5.JS文件如下：

$(function () {//准备请求的数据并显示模式框$('div.loading ')。show()；$.Ajax({ URL : '/Ajax _ handler . html/'，type: 'GET '，data: {}，success:函数(response){ var content=response . content；$('#content ')。html(内容)；//请求完成，隐藏模式框$('div.loading ')。hide()；}，error : function(){ $(' # content ')。html('服务器错误.');//请求完成，隐藏模式框$('div.loading ')。hide()；} })});描述：

页面加载后，开始发送Ajax请求，并从服务器端的ajax_handler视图请求数据。此时，显示模式框的请求完成后，无论是否成功，都要隐藏模式框。

6.ajax_handler视图如下，它模拟网络延迟并返回一些字符串：

来自django . http import JSON response from django . utils . safe string import mark _ safe # cancel string escape def Ajax _ handler(request): #仿真网络延迟import time time . sleep(3)msg=' ' ' XXX ' ' ' ' #在这里，可以把一些字符串返回JSON response({ ' content ' : mark _ safe(msg)})如下：

如果gif动画无法显示，可能是浏览器缓存问题。项目的完整代码在这里：https://github.com/Ayhan-Huang/Loading

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。