JavaScript实现自定义加载动画

"本文主要介绍如何使用JavaScript自定义加载（loading）效果，提供了一种创建具有白色底色的加载中图片效果，并展示了具体实现代码。此外，还提及了加载框的显示、隐藏方法以及如何在项目中引用相关文件。" 在开发网页应用时，加载效果是用户体验中的一个重要组成部分，它能够告诉用户程序正在处理请求并等待响应。JavaScript可以用来定制各种各样的加载动画，以满足特定的设计需求。本教程中，我们将学习如何用JavaScript创建一个自定义的加载loading效果。 首先，加载效果通常包含一个旋转的图形元素和一条简短的文字信息，比如“加载中”或“合成中”。在本文给出的示例中，加载图标是一个白色的旋转圆形，底色为白色，因此在页面上可能不太显眼。为了使加载效果更加明显，可以考虑更改图标颜色或者添加背景阴影。 实现这个加载效果的方法如下： 1. 定义HTML结构： 生成一个包含旋转图标（这里使用的是mui-spinner样式类）和文本内容的HTML字符串。例如： ``` var html = '<i class="mui-spinner mui-spinner-white"></i><p class="text">' + (message || "数据加载中") + '</p>'; ``` 2. 创建遮罩层： 为了使加载效果更加突出，可以添加一个遮罩层，覆盖整个页面。通过检查DOM中是否存在已有的遮罩层元素，来决定是否创建新的遮罩层。 3. 显示和隐藏加载框： 提供两个方法，`showLoading`用于显示加载框，接受消息文字和上下文对象作为参数；`hideLoading`用于隐藏加载框。在`showLoading`中，将生成的HTML添加到页面，并调整位置（如果需要）。在`hideLoading`中，移除加载框和遮罩层。 4. 引入工具文件： 在项目的`App.vue`中导入公共CSS文件（如`./common.css`），并在`main.js`中引入工具模块（`./tools`），然后将其挂载到Vue原型上，以便在组件中使用。 5. 使用方法： 在需要显示加载效果的地方调用`this.tool.showLoading`，传入提示信息和当前Vue实例。完成加载后，调用`this.tool.hideLoading`关闭加载效果。 示例代码如下： ```javascript // tools.js export default { showLoading(message, el, type) { // ... }, hideLoading() { // ... } } ``` 在实际项目中，可以根据需要调整样式和逻辑，以适应不同场景的需求。例如，可以添加不同的加载类型（type），根据type改变加载框的位置或样式。自定义加载效果可以帮助提升应用的视觉体验，让用户的等待过程更加舒适。