欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

通过JS和CSS，实现网页加载中的动画效果

发布时间：2025/3/17 javascript 66 豆豆
生活随笔 收集整理的这篇文章主要介绍了 通过JS和CSS，实现网页加载中的动画效果 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

需要材料：

一张loading动画的gif图片

基本逻辑：

  • 模态框遮罩 + loading.gif动图，
  • 默认隐藏模态框
  • 页面开始发送Ajax请求数据时，显示模态框
  • 请求完成，隐藏模态框

    • 下面我们通过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; }

    说明：

  • 通过设置position: fixed，并令上下左右为0，实现模态框覆盖整个页面；
  • 设置gif动态图为背景，居中，来显示加载效果；
  • 通过设置z-index值，令gif图悬浮在模态框上面；
  • background-color: black;是为了看着明显，具体使用时可以设为white;


  • 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请求，从服务端ajax_handler视图请求数据，这时显示模态框
  • 请求完成后，不论成功与否，隐藏模态框


  • 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，实现网页加载中的动画效果的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。