基于jQuery实现模拟页面加载进度条

首页

web前端

js教程

基于jQuery实现模拟页面加载进度条_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:38 PM

加载进度条

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？
基于jQuery实现模拟页面加载进度条_jquery

我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载了多少，而后用jq模拟出一个进度条来显示。

首先我们先画一个进度条的样子，也就是上图图中的样子，这个不用过多说明，自己看代码
CSS

复制代码代码如下:

 
.loading{position:relative;top:0;left:0} 
.tip1{float:left;background:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative} 
.jindu{float:left;margin-left:20px;color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:relative} 
.jindu b{color:#A70000;width:0;height:0;font-size:0px;border-width:10px;border-color:#fff #fff #fff #A70000;border-style:solid;position:absolute;left:-20px;top:5px;overflow:hidden} 
.jindu .jindu2{width:0px;height:32px;line-height:32px;background:#A70000;position:absolute} 
.jindu .text{width:150px;height:32px;line-height:32px;text-align:center;position:absolute} 
　

HTML

复制代码代码如下:

系统初始化中

页面总进度 0%

这时候注意了，我们要引用jquery库，引用的位置不是在head区域，而是紧接着html代码下面写。为什么要这样，因为样式我们放head里的原因是保证页面加载第一步就把样式加载好，这样页面不会乱。而JS则不需要，再加上页面上大的文件主要也就是js，所以放在body里加载js是为了进度条考虑。
进度条画好了，jquery引用了，我们现在要写个方法，也就是可以让进度条动起来

复制代码代码如下:

 
var loading = function(a,b){ 
var c = b*1.5; 
if(b==100){ 
$('.bgloader .jindu2').animate({width:c 'px'},500,function(){ 
$('.bgloader .tip1').text(a); 
$('.bgloader font').text(b); 
$('.bgloader .loading').animate({top:'-32px'},1000,function(){ 
$('.bgloader').fadeOut(); 
}); 
}); 
}else{ 
$('.bgloader .jindu2').animate({width:c 'px'},500,function(){ 
$('.bgloader .tip1').text(a); 
$('.bgloader font').text(b); 
}); 
} 
}; 

这里我写了个loading(a,b)，两个参数分别是显示加载内容提示信息和加载进度百分比，然后，我用了其他几个js库做加载进度测试

复制代码代码如下:

;
<脚本类型=“text/javascript”src=“http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js”>
<脚本类型=“text/javascript”src=“http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js”>

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7647

CakePHP 教程

1392

steam的账户名称是什么格式

win11激活密钥永久

NYT迷你填字游戏答案

110

显示更多

Related knowledge

在Illustrator中加载插件时出错[修复] Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息？一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题，但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误，我们将在本文中指导您修复问题，请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身

Stremio字幕不工作；加载字幕时出错 Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上运行吗？一些Stremio用户报告说，视频中没有显示字幕。许多用户报告说遇到了一条错误消息，上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息：加载字幕时出错加载字幕失败：这可能是您正在使用的插件或您的网络有问题。正如错误消息所说，可能是您的互联网连接导致了错误。因此，请检查您的网络连接，并确保您的互联网工作正常。除此之外，这个错误的背后可能还有其他原因，包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如

如何使用HTML和CSS设置进度条的颜色？ Sep 19, 2023 pm 08:25 PM

在网站开发中，进度条是网站的重要组成部分。进度条显示了进程的进度。借助它，用户可以看到网站上正在进行的工作的状态，包括加载时间、文件上传、文件下载和其他类似任务。默认情况下，它呈灰色。然而，为了使进度条突出并具有视觉吸引力，可以使用HTML和CSS来改变它们的颜色。什么是进度条？进度条用于显示任务的进度。它是一个图形用户界面元素。它基本上由一个水平条组成，随着任务的进行逐渐填充，同时伴随着百分比值或其他完成指示器。进度条在Web应用程序中用于向用户提供关于完成诸如文件上传、文件下载或软件安装等过

JavaScript 如何实现页面加载进度条功能？ Oct 27, 2023 am 08:57 AM

JavaScript如何实现页面加载进度条功能？在现代互联网应用中，页面加载速度是用户体验的关键因素之一。为了向用户展示加载过程，许多网站和应用程序会使用加载进度条。JavaScript提供了一种简单而有效的方法来实现页面加载进度条功能。具体实现过程如下：创建HTML结构首先，在页面的合适位置创建一个进度条的HTML结构，常见的是将进度条放置在

PHP实现无限滚动加载 Jun 22, 2023 am 08:30 AM

随着互联网的发展，越来越多的网页需要支持滚动加载，而无限滚动加载是其中的一种。它可以让页面不断加载新的内容，使用户可以更流畅地浏览网页。在这篇文章中，我们将介绍如何使用PHP实现无限滚动加载。一、什么是无限滚动加载？无限滚动加载是一种基于滚动条的网页内容加载方式。它的原理是当用户滚动至页面底部时，通过AJAX异步调取后台数据，实现不断加载新的内容。这种加载方

插入超链接时Outlook冻结 Feb 19, 2024 pm 03:00 PM

如果您在向Outlook插入超链接时遇到冻结问题，可能是由于网络连接不稳定、Outlook版本旧、防病毒软件干扰或加载项冲突等原因。这些因素可能导致Outlook无法正常处理超链接操作。修复插入超链接时Outlook冻结的问题使用以下修复程序解决插入超链接时Outlook冻结的问题：检查已安装的加载项更新Outlook暂时禁用您的防病毒软件，然后尝试创建新的用户配置文件修复办公室应用程序卸载并重新安装Office我们开始吧。1]检查已安装的加载项可能是Outlook中安装的某个加载项导致了问题。

css加载不出来怎么解决 Oct 20, 2023 am 11:29 AM

css加载不出来的解决办法有检查文件路径、检查文件内容、清除浏览器缓存、检查服务器设置、使用开发者工具和检查网络连接等。详细介绍：1、检查文件路径，首先请确保CSS文件的路径正确，如果CSS文件位于网站的不同部分或子目录中，需要提供正确的路径，如果CSS文件位于根目录下，路径应该是直接的；2、检查文件内容，如果路径正确，那么问题可能出在CSS文件本身，打开CSS文件检查等等。

如何使用Vue实现进度条特效 Sep 19, 2023 am 09:22 AM

如何使用Vue实现进度条特效进度条是常见的一种界面元素，它可以用来展示一个任务或操作的完成情况。在Vue框架中，我们可以通过一些简单的代码实现进度条的特效效果。本文将介绍如何使用Vue来实现进度条特效，并提供具体代码示例。创建Vue组件首先，我们需要创建一个Vue组件来实现进度条的功能。在Vue中，组件是可以复用的，我们可以在多个地方使用。创建一个名为Pro

See all articles

基于jQuery实现模拟页面加载进度条_jquery

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题