javascript 实现页面加载进度条代码

New Document

加载中，请耐心等待

');
window.onload = function () {
document.getElementById('loadbox').style.display="none";
document.getElementById('imglist').style.display="block";
}
// -->

欧文加油！

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

时间： 2010-04-10

简单实现js进度条加载效果

本文实例为大家分享了js进度条加载效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下载进度</title> <style> /*定义父容器*/ .content{ width: 500px; height: 200px; background: pin

最终效果如下图所示,pc和移动端都可以展示的,调用方法也很简单,开始调用:loading.baosight.showPageLoadingMsg(false),alse代表不现实加载说明,true展示加载说明.调用完成后调用:loading.baosight.hidePageLoadingMsg(),在整个代码里有两个文件,一个是js文件,一个是css文件.切记不要忘记引入jquery.js css文件 #_loadMsg{ display: inline-block; width: 100%;

浅析JS异步加载进度条

展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值 2) 在document.body 新增一个动态的div. 代码实现: Main.html: <!DOCTYPE html> <html>

jquery插件NProgress.js制作网页加载进度条

NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装依赖于 jQuery (1.8版本及以上),添加 np

pace.js页面加载进度条插件

本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

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

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

Android Webview添加网页加载进度条实例详解

推荐阅读:Android WebView线性进度条实例详解最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

jquery网页加载进度条的实现

本次主要介绍一下网页加载进度的实现.如下图,在页面加载的时候,上方红色的进度条网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我

教您去掉ie网页加载进度条的方法

这样虽没有对功能有什么影响,可是体验总不怎么好,那如何解决这个问题了,网上有很多文章都有说过在被目标页加载后设置window.status = "xx"这类的,可是我发现这个方法这样的情形下并不怎么好使. 复制代码代码如下: <div> <ul> <li><a href="1.html" target="page"></a></li> <li><a hre

用jQuery模拟页面加载进度条的实现代码

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码代码如下: *{margin:0;padding:0;font-size:12px} .loading{position:relative;top:0;le

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

loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈","省略号"等等. 网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了. 但是页面的加载进

自己动手制作基于jQuery的Web页面加载进度条插件

静态效果的实现网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio

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

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A7

微信报警 zabbix实现详解

现实生产环境中,我们通常使用邮件和短信接受zabbix报警信息,但是邮件经常被工作人员搁置在角落中甚至被设置为垃圾邮件被过滤掉.公司的短信接口又太贵,复杂环境中使用短息报警会使运维成本增加很多.微信提供了很好的第三方接口,我们可以利用微信报警以求降低运维成本. 微信的第三方接口要求我们先申请一个企业号--传送门:https://qy.weixin.qq.com/ 如何操作企业号? 1.通讯录添加企业成员我们要提前把成员信息添加进组织部门,必填项+手机号或者微信号,这样别人扫描二维码的时

notepad++ 等用正则表达式自动添加sql引号的技巧

notepad正则表达式添加sql引号,具体内容请看下文详解. 一般sql语句会经常用到给括号里的内容添加引号,sql如下 Select * From Test Where Id In ('25001510153394032', '25001510153394034', '25001510153393963', '25001510153392080', '25001510153392079', '25001510153393964'); 一开始参考了http://www.jb51.net/art

js之弹出式窗口代码生成器

弹出式窗口代码生成器要完成此效果把如下代码加入到区域中 -1){ space=txt.indexOf(wrd); txt=txt.substring(0,space)+smut+txt.substring((space+wrdl),txt.length);} smut=">"; replacewords="> "; space=replacewords.indexOf(" "); wrd=replacewords.substring

Asp.net页面中调用soapheader进行验证的操作步骤

本文为大家分享了Asp.net页面中调用以SOAP头作验证的web services操作步骤,供大家参考,具体内容如下第一步:用来作SOAP验证的类必须从SoapHeader类派生,类中Public的属性将出现在自动产生XML节点中,即: <soap:Header> <UserSoapHeader xmlns="http://tempuri.org/"> <UserName>string</UserName> <Pwd>st

一个PHP的QRcode类与大家分享

类的代码: 复制代码代码如下: define('QR_MODE_NUL', -1); define('QR_MODE_NUM', 0); define('QR_MODE_AN', 1); define('QR_MODE_8', 2); define('QR_MODE_KANJI', 3); define('QR_MODE_STRUCTURE', 4); // Levels of error correction. define('QR_ECLEVEL_L', 0); define('QR_EC

3个PHP多维数组转为一维数组的方法实例

很多时候我们需要将多维数组转成一维数组,因为我们只需要一维数组,而且一维数组使用起来更方便,在PHP中如何将多维数组转成一维数组?下面我们来看看三个多维数组转为一维数组例子:一.使用foreach 复制代码代码如下: <?php function arr_foreach ($arr) { static $tmp=array(); if (!is_array ($arr)) { return false; } fo

js 数组的for循环到底应该怎么写？

然后来看看今天我开始怀疑哪个权威哦家伙了... 自从开始学编程,自从接触到数组这个东西,我就一直在不同的地点和不同的时间不断看到有人提醒:在用for遍历数组的时候一定要用 for(var i=0,n=arr2.length;i<n;i++)的方式哦,而不要用for(var i=0;i>arr.length;i++)的方式哦,因为用脑子想想也知道,第二种方法的第二部分会一直去计算数组的length,所以自然效率比较低. 哦?我们这里不说其他程序语言,而只讨论js,因为不同的语言,实现可能不同,其

python 实时遍历日志文件

open 遍历一个大日志文件使用 readlines() 还是 readline() ? 总体上 readlines() 不慢于python 一次次调用 readline(),因为前者的循环在C语言层面,而使用readline() 的循环是在Python语言层面. 但是 readlines() 会一次性把全部数据读到内存中,内存占用率会过高,readline() 每次只读一行,对于读取大文件, 需要做出取舍. 如果不需要使用 seek() 定位偏移, for line in open('fi

MySQL开启慢查询日志log-slow-queries的方法

一个普通WEB站点的页面常常需要查询N条SQL语句后才能得出页面结果,当网站访问速度慢而前端做了大量优化工作以后,数据库瓶颈的查找也是WEB优化的一个重要部分. MySQL中提供了一个慢查询的日志记录功能,可以把查询SQL语句时间大于多少秒的语句写入慢查询日志,日常维护中可以通过慢查询日志的记录信息快速准确地判断问题所在. 开启慢查询功能 log-slow-queries 慢查询日志文件路径 long_query_time 超过多少秒的查询就写入日志打开my.cnf配置文件,加入以下代码:

使用vue框架 Ajax获取数据列表并用BootStrap显示出来

最近在搞毕业设计想趁机学学前端知识,于是就应用了目前比较流行的vue框架来进行数据显示,使用BootStrap进行简单的样式编写 1.第一步肯定是包的导入了目前对node.js还不是很了解,所以包都是手动下载导入的,没有用到那个nmp vue.min.js是vue的主包,vue-resource.js是开源的vue Ajax包,对ajax进行了封装 bootstrap既就是样式的相关css和js了 <script type="text/javascript" src="

专题

随机推荐