javascript自定义加载loading效果

下面我将详细讲解“JavaScript自定义加载loading效果”的完整攻略，主要分为以下几个部分：

一、理解loading效果

1.1 什么是loading效果

loading效果是指在页面或某个模块正在进行加载操作时，为了提高用户体验而展示的一种动态效果。

1.2 loading效果的重要性

loading效果是提升用户体验的关键环节。当用户在浏览网页或使用应用的时候，会因为等待时间过长而产生烦躁的情绪，导致流失，所以采用一个合适的loading效果能有效增加用户在网页或应用中的停留时间。

二、实现loading效果

2.1 实现方式

实现loading效果的方式有很多，常见有以下几种：

• GIF图加载
• CSS动画效果
• Canvas动画效果
• JavaScript动画效果

其中，最常用的是CSS动画效果和JavaScript动画效果。

2.2 CSS动画效果实现方式

CSS动画效果通过在CSS中定义动画关键帧，然后通过添加或删除CSS类来触发动画。例如：

.container {
  position: relative;
}

.container.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .3);
  border-top-color: #000;
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

以上代码可以实现一个简单的loading效果，效果是一个旋转的圆形。

2.3 JavaScript动画效果实现方式

JavaScript动画效果通常使用canvas或SVG绘制图形，然后通过JS控制动画。例如：

<div id="container"></div>

const container = document.getElementById('container');

function createLoading() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 50;
  canvas.height = 50;
  container.appendChild(canvas);

  let angle = 0;
  setInterval(() => {
    ctx.clearRect(0, 0, 50, 50);
    ctx.beginPath();
    ctx.arc(25, 25, 15, 0, Math.PI * 2);
    ctx.strokeStyle = 'rgba(0, 0, 0, .3)';
    ctx.lineWidth = 3;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(25, 25, 15, -Math.PI / 2, angle - Math.PI / 2);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 3;
    ctx.stroke();

    angle += Math.PI / 18;
  }, 50);
}

createLoading();

以上代码可以实现一个简单的loading效果，效果是一个旋转的圆弧。

三、结语

通过CSS和JavaScript实现loading效果，需要根据需求和场景来选择合适的方式。CSS动画效果简单易用，适用于较简单的loading场景；JavaScript动画效果可以实现更丰富的效果，适用于较复杂的loading场景。