原生JavaScript实现Loading进度条组件

基本思路

一、基本思路

为满足现有需求并保持代码轻便，我们采用原生JavaScript编写一个名为“Loading”的构造函数。该函数接收两个参数：arr（图片数组）和callback（完成后的回调函数）。构造函数内部遍历图片数组进行加载，每加载完成一张图片便更新进度条状态，直至所有图片加载完毕，进度条显示为100%。

实现步骤

二、实现步骤

（1）首先构建进度条的基础结构，编写相应的HTML和CSS代码。

完成后预览进度条的初始效果。

（2）编写Loading构造函数。在进度条的init方法执行时，动态添加并渲染进度条的HTML结构和CSS样式。至此，进度条模块开发完毕，使用时只需引入该构造函数并实例化对象即可。

（3）实例化一个进度条对象。

组件改进

三、改进

该组件的可扩展性相对有限，主要体现在进度条样式的定制上。为了支持不同实例拥有不同的样式，我们在构造函数中增加了this.setCss方法，以实现个性化样式配置。具体修改如下：

若需将进度条颜色设置为红色（非默认的#01ffff），可在初始化前调用setCss方法。

页面显示效果如下。

总结

四、总结

该进度条插件已开发完成，但仍存在诸多优化空间，例如加载动画可更加流畅、样式配置可更简洁、代码可读性需提升等。优化之路无止境，仍需持续努力。