使用JavaScript实现网页加载进度Loading

javascript

119 浏览量更新于2024-09-01 收藏 107KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"这篇文章主要讲解如何使用JavaScript实现一个网页加载进度loading的效果，提供了一种提升用户体验的方法，尤其是在处理大量数据或资源加载时。" 在网页开发中，loading动画常常用于指示用户页面或数据正在加载的过程，例如在下拉刷新、上拉加载功能中。加载效果的种类多样，如旋转的圈圈、闪烁的省略号等。对于数据加载的loading，我们可以直接在发送请求前显示，请求完成后隐藏。然而，页面整体的加载进度则相对复杂。由于Web的特性，页面的加载进度难以精确计算，尤其是当涉及到多个分散的资源时。通常，我们无法实时监控所有资源的加载状态，因此实现的加载进度往往是模拟的。关键在于创建一种让用户感觉加载正在按部就班进行的假象，从而减少用户等待的焦虑感。要实现一个简单的页面加载进度loading，我们可以遵循以下步骤： 1. HTML结构：首先，创建一个包含loading元素的HTML结构，例如一个div，里面有一个显示进度百分比的子div。 ```html <!DOCTYPE html> <html> <head> <title>动手实现一个网页加载进度loading</title> </head> <body> <div class="loading" id="loading"> <div class="progress" id="progress">0%</div> </div> </body> </html> ``` 2. CSS样式：然后，添加CSS样式来定位和装饰这个loading元素，使其在页面中央显示，并设置合适的背景颜色和层级。 ```css .loading { display: table; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 5; } .progress { /* 添加更多样式以适应你的设计需求 */ } ``` 3. JavaScript实现：最后，利用JavaScript来更新加载进度。可以监听`window.onload`事件，当页面所有资源加载完成后隐藏loading。此外，还可以通过监听`document.onreadystatechange`来逐步更新进度，但这只能提供一种近似的进度表示，因为实际的资源加载顺序和时间难以预估。 ```javascript let progressElement = document.getElementById('progress'); let loadingElement = document.getElementById('loading'); document.onreadystatechange = function() { if (document.readyState === 'loading') { // 更新进度，比如每次增加1% let currentProgress = parseInt(progressElement.innerText) + 1; progressElement.innerText = `${currentProgress}%`; } else if (document.readyState === 'complete') { // 页面加载完成，隐藏loading loadingElement.style.display = 'none'; } }; ``` 这个简单的例子展示了如何使用JavaScript和HTML/CSS创建一个基本的页面加载进度指示器。虽然它不能精确反映实际的加载进度，但足以提供一种视觉反馈，让用户知道页面正在加载并预计何时能完成。在实际项目中，可能需要根据具体需求进行调整，比如添加更复杂的动画效果或优化性能。

资源详情

资源推荐

javascript实现一个网页加载进度实现一个网页加载进度loading

本篇文章主要介绍了javascript实现一个页面加载进度loading的具体步骤以及示例代码，具有一定的参考价值，

下面跟着小编一起来看下吧

loading随处可见，比如一个app经常会有下拉刷新，上拉加载的功能，在刷新和加载的过程中为了让用户感知到 load 的过

程，我们会使用一些过渡动画来表达。最常见的比如“转圈圈”，“省略号”等等。

网页loading有很多用处，比如页面的加载进度，数据的加载过程等等，数据的加载loading很好做，只需要在加载数据之前

（before ajax）显示loading效果，在数据返回之后（ajax completed）结束loading效果，就可以了。

但是页面的加载进度，需要一点技巧。

页面加载进度一直以来都是一个常见而又晦涩的需求，常见是因为它在某些“重”网页（特别是网页游戏）的应用特别重要；晦

涩是因为web的特性，各种零散资源决定它很难是“真实”的进度，只能是一种“假”的进度，至少在逻辑代码加载完成之前，我

们都不能统计到进度，而逻辑代码自身的进度也无法统计。另外，我们不可能监控到所有资源的加载情况。

所以页面的加载进度都是“假”的，它存在的目的是为了提高用户体验，使用户不至于在打开页面之后长时间面对一片空白，导

致用户流失。

既然是“假”的，我们就要做到“仿真”才有用。仿真是有意义的，事实上用户并不在乎某一刻你是不是真的加载到了百分之几，

他只关心你还要load多久。所以接下来我们就来实现一个页面加载进度loading。

首先准备一段loading的html：

<!DOCTYPE html>

<html>

<head>

<title>动手实现一个网页加载进度loading</title>

</head>

<body>

</div>

</body>

</html>

来点样式装扮一下：

.loading {

display: table;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #fff;

z-index: 5;

}

.loading .progress {

display: table-cell;

vertical-align: middle;

text-align: center;

}

我们先假设这个loading只需要在页面加载完成之后隐藏，中间不需要显示进度。那么很简单，我们第一时间想到的就是

window.onload：

（以下内容为了方便演示，默认使用jQuery，语法有es6的箭头函数）

var $loading = $('#loading')

var $progress = $('#progress')

window.onload = () => {

$loading.hide()

}

ok，这样基本的loading流程就有了，我们增加一个进度的效果，每隔100ms就自增1，一直到100%为止，而另一方面window

loaded的时候，我们把loading给隐藏。

我们来补充一下进度：

var $loading = $('#loading')

var $progress = $('#progress')

var prg = 0 // 初始化进度

var timer = window.setInterval(() => { // 设置定时器

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38713801

粉丝: 5
资源: 930

使用JavaScript实现网页加载进度Loading

基于javascript实现页面加载loading效果

JavaScript实现网页加载进度条代码超简单

html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果

unity如何监听unity webgl的加载进度

如何在preload.js写入显示加载进度

three.js加载多个gltf模型，并打印加载进度

用Kotlin写一个设置WebView在加载网页的时候在通知中显示进度

做一个0到100的加载动画

threejs 获取多个模型的加载总进度

cesium瓦片渲染完成后页面关闭loading

this.jzh_loading = true; this.timer = setInterval(() => { this.percentage += 10; if (this.percentage >= 100) { clearInterval(this.timer); this.jzh_loading = false; this.percentage = 0;帮我解释一下代码

用Phser.6给游戏开始场景写一个loading进度条

electron webview 进度条加载显示

Pixi.js 如何预载入多个图片并且显示载入进度，完成后回调方法

用python代码在网页中显示进度条

vue 使用three.js加载hdr

cc.loader.loadRes 该怎么使用

NProgress.done()

最新资源