网页加载进度条的JS程序开发思路与实际应用-京杭网网站建设公司

当前位置：网站建设 > 优化推广

资料来源：网络整理时间：2023/3/23 0:39:38 共计：3586 浏览

页面加载进度条实现原理：
将要加载的js动态的添加到head中，并根据每个是否加载完成，统计当前一共加载完成的个数。当每一项都加载完成，加载成功。设置加载失败时间。当超过这个时间提示加载失败。

一、实现逻辑与概念

先我们要知道的是，目前没有任何浏览器可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现0-100%的加载显示过程。

因此我们需要通过html代码逐行加载的特性，在整页代码的若干个跳跃行数中设置节点，进行大概的模糊进度反馈来实现进度加载的效果。大致意思是：页面每加载到指定区域，则返回(n)%的进度结果，通过设置多个节点，来达到一步一步显示加载进度的目的。

具体是如何设置呢？先我们将网页分成若干区域，就以 frontopen来说，网站的结构分为head区域、mian区域（文章主体部分）、sidebar侧边栏、foot脚部四个部分。考虑做一个范围粗犷一点进度反馈效果。如下图：

将进度反馈设置为四个部分：head部分返回30%进度，main部分返回60%进度，sidebar部分返回70%进度，后foot加载完成后返回100%。

二、实现方法

1.先我们需要在html页面中，给进度条设定设定一个容器。例如本博的body下方会有一个“<div class=”loading”></div>”的div容器，这就是后面我们需要操作并显示的进度条了，当然大家有兴趣的话可以设置更多有个性的进度条。

2.为loading容器设定样式，以本博的进度条为例，样式如下：

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。