前言

学习了bilibili up主 码小渣的视频
【HTML+CSS】8分钟实现砰砰的爱心动画,快学起来送给喜欢的人吧!
https://www.bilibili.com/video/BV1ba4y1475n

基于这个代码,稍加微调,既可作为网站的预加载动画


线上预览地址
https://tczmh.gitee.io/loadding3/
https://gitee.com/tczmh/loadding3


简单解释一下原理
html加载过程比较冗长
依次是
index.html
index.css
index.js
image-01.png
image-02.png


仅有整个页面全部加载完成,用户才能开始正常访问
如果是一台廉价的云主机,带宽只有最低的1m
用户打开这个网页可能至少需要5秒以上


所以解决这个问题的思路就是
把用户当成一个 小孩
制作一个不那么需要占网速的 玩具
先塞到用户手里,吸引注意力
等 5 ~ 10 秒后页面加载完成
再收走这个 玩具 显示页面
那么这个玩具就是本篇主题 预加载动画


学习了up主码小渣的视频后
发现仅需要2kb可以实现
丰富的色彩加有趣的动画
足以吸引用户看个5秒不跑路了

代码

核心代码分为3个部分
html

  1. <!-- 这段代码建议放在Body最上面,且css文件也要放在head中 -->
  2. <div id="loading-v3">
  3. <div id="loading-v3-bg"></div>
  4. <div id="loading-v3-box">
  5. <ul>
  6. <li></li>
  7. <li></li>
  8. <li></li>
  9. <li></li>
  10. <li></li>
  11. <li></li>
  12. </ul>
  13. </div>
  14. </div>

css

  1. #loading-v3 {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. right: 0;
  6. bottom: 0;
  7. width: 100%;
  8. margin: 0;
  9. padding: 0;
  10. z-index: 99999;
  11. }
  12. #loading-v3-bg {
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. right: 0;
  17. bottom: 0;
  18. width: 100%;
  19. margin: 0;
  20. padding: 0;
  21. background: #f6f6f6;
  22. }
  23. #loading-v3-box {
  24. height: 100vh;
  25. z-index: 9999;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. }
  30. #loading-v3-box ul {
  31. height: 20px;
  32. display: flex;
  33. list-style-type: none;
  34. padding: 0;
  35. margin: 0px;
  36. }
  37. #loading-v3-box ul li {
  38. width: 14px;
  39. height: 14px;
  40. border-radius: 1rem;
  41. margin-right: 10px;
  42. list-style-type: none;
  43. }
  44. #loading-v3-box ul li:nth-child(1) {
  45. background: #f4433c;
  46. animation: loading-v3 3s 0s infinite;
  47. }
  48. #loading-v3-box ul li:nth-child(2) {
  49. background: #ff9800;
  50. animation: loading-v3 3s 0.2s infinite;
  51. }
  52. #loading-v3-box ul li:nth-child(3) {
  53. background: #ffeb3b;
  54. animation: loading-v3 3s 0.4s infinite;
  55. }
  56. #loading-v3-box ul li:nth-child(4) {
  57. background: #64e291;
  58. animation: loading-v3 3s 0.6s infinite;
  59. }
  60. #loading-v3-box ul li:nth-child(5) {
  61. background: #2d85f0;
  62. animation: loading-v3 3s 0.8s infinite;
  63. }
  64. #loading-v3-box ul li:nth-child(6) {
  65. background: #794c74;
  66. animation: loading-v3 3s 1s infinite;
  67. }
  68. @keyframes loading-v3 {
  69. 25%, 50% {
  70. height: 60px;
  71. transform: translateY(-30px);
  72. }
  73. 75%, 100% {
  74. height: 14px;
  75. transform: translateY(-7px);
  76. }
  77. }

js

  1. // 当你的页面加载完成后,执行这段代码,自动删除加载动画的dom
  2. document.body.removeChild(document.querySelector("#loading-v3"));

延伸

按照我之前写的2篇预加载文章,到这里也就差不多结束了
但我近期还发现预加载动画的一个妙用
就是让预加载动画支持 vue
因为 vue 打包后的文件通常能达到2mb ~ 5mb
非常恐怖 用户首次加载能急死


其实用起来也是一样的
把上文 html 中的 <div id="loading-v3">
放到 public/index.html
css 文件也引入 index.htmlhead 部分

最后在 Layout.vueIndex.vuemounted 中加入类似以下代码

  1. methods: {
  2. loaded() {
  3. const loading = document.querySelector("#loading-v3");
  4. if (loading) {
  5. document.body.removeChild(loading);
  6. }
  7. }
  8. },
  9. mounted() {
  10. this.loaded();
  11. }


有极小的概率,会出现上述代码没有生效
导致网页加载完了,你的动画还遮罩住网站,导致bug
如果你希望万无一失,在 index.html 中,加入 settimeout
判断如果30秒后,loading-v3 的 dom 仍然能获取到 不是空,移除之
代码类似于

  1. <script>
  2. setTimeout(function (){
  3. const loading = document.querySelector("#loading-v3");
  4. if (loading) {
  5. document.body.removeChild(loading);
  6. }
  7. },30000)
  8. </script>

END