JavaScript实现自定义加载loading效果

"本文主要介绍如何使用JavaScript自定义加载（loading）效果，提供了一种实现方式，包括显示、隐藏加载提示以及对应的CSS样式引用。" 在网页应用开发中，加载loading效果是提升用户体验的重要手段，它能告诉用户系统正在进行后台处理，等待片刻即可。JavaScript作为前端开发的核心语言之一，常被用来实现这种交互效果。本文提供的实例展示了如何用JavaScript自定义一个加载loading的组件。 首先，加载效果的视觉呈现通常包含一个旋转的图形（如spinner）和一条简短的文字信息，如“加载中”或“合成中”。在这个例子中，加载图形是一个白色的spinner，底色是透明的，因此在白色背景下可能不太明显。加载效果的显示和隐藏通过调用特定的方法来控制。 具体实现中，有两个关键方法：`showLoading` 和 `hideLoading`。`showLoading` 接收两个参数，一个是提示信息，另一个是当前Vue实例，用于确定加载效果的位置。如果需要，还可以传递一个类型参数（type），用于处理不同的布局需求。 ```javascript // 显示加载框 showLoading(message, el, type) { var html = ''; html += '<i class="mui-spinner mui-spinner-white"></i>'; html += '<p class="text">' + (message || "数据加载中") + '</p>'; // 创建或获取遮罩层 var mask = document.getElementsByClassName("mui-show-loading-mask"); if (mask.length == 0) { mask = document.createElement('div'); mask.classList.add("mui-show-loading-mask"); } // 根据不同类型的加载效果调整位置 if (type !== '2' && type) { // ... 对高度的计算逻辑 ... } // 将加载元素添加到DOM中 // ... } ``` `hideLoading` 方法则负责移除加载效果，即隐藏遮罩层和加载提示。在引用方面，需要在`App.vue`的`<style>`中导入公共CSS文件，而在`main.js`中引入工具类库（tools.js），并将工具对象挂载到Vue的原型链上，以便在Vue实例中可以直接调用。 ```javascript // 在App.vue的<style scoped>中 @import './common.css'; // 在main.js中 import tools from './tools'; Vue.prototype.tool = tools; ``` 在`tools.js`中，定义了`showLoading`和`hideLoading`方法的完整实现，包括计算和设置加载框的位置，以及添加和移除DOM元素。通过这样的方式，开发者可以根据项目需求自定义加载提示的样式和行为，提高用户体验。