给页面加上loading加载效果

在页面中载入进度条，是一种常见的特效。它比较实用，当页面的元素比较多的时候，使用它可以让网友不至于等的着急。其原理很简单：在网页的头部放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。此效果也有插件可实现，不过此次分享的是自定义方法。

效果

demo
http://build.gzwhir.com/Whir_WEB/jsdemo/loading_1/index.shtml

如何实现呢？
1、首先在开始的地方放置

<body><div id="loading"></div>
</body>

2、在和之间放置样式和jquery框架
3、给loading层设置样式

<style type="text/css">
#loading{z-index:1;padding:5px 0 5px 29px;
background:url(images/loadingwy.gif) no-repeat 10px top;left:0;top:0;width:90px;
position:fixed; height:21px}
</style>

4、在页面的底部放置

<script type="text/javascript">$("#loading").fadeOut(3000)
</script>

给页面加上loading加载效果相关推荐

vue项目中，设置页面局部loading加载效果（element）
直接引用element的loading,默认的是全屏loading,实际中有很多地方不需要全屏loading,只需要某部分loading,如上图话不多说,直接上代码封装好的loading.js i ...
android 百分比loading,牛逼的loading加载效果
牛逼的loading加载效果介绍: AnimatedCircleLoadingView一个不错的loading加载效果,自定义AnimatedCircleLoadingView设置startDete ...
使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏
网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用. 下面使用HTML+CSS+JS实现完整的Loadin ...
jquery实现文件上传及loading加载效果
jQuery实现文件上传步骤 1.定义UI结构 2.验证是否选择了文件 3.向formdata中追加文件 4.使用jQuery的Ajax发起上传文件的请求核心代码 1.ajaxStart(callb ...
element使用自定义的loading加载效果
在使用loading加载的过程中,elementui提供了两种样式,但是针对不同的项目,也是有着不同的需求,需要不同的或者特制的loading加载效果. 解决思路如下: 结合elementui本身的标 ...
CSS Loading 加载效果
平滑加载 /* 平滑加载 */ .progress-1 {width: 120px;height: 20px;background: linear-gradient(#000 0 0) 0/0% no ...
移动端最强适配（rem适配之px2rem）移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
ajax文字上下滚动,ajax页面底部滚动加载效果实例
html部分: //ajax读取的 data.html 使用append 的方式添加到这里 //ajax 状态文字输出到这里 [数据加载中][数据加载成功][没有数据了] js代码需要jquery支持 ...
WPF 类似jquery blockUI的遮罩Loading加载效果
最近一个小项目想用WPF重写一下,需要一个类似Jquery 的blockUI的遮罩层,在后台执行任务的过程中显示Loading... 网上找了一圈,很难找到一个可以现成使用的.最终在基于网上资料的基础 ...
loading加载效果（纯css）
一.平滑加载 <div class="loading-1"></div> *{box-sizing: border-box;}.loading-1{marg ...

给页面加上loading加载效果

给页面加上loading加载效果相关推荐

最新文章

热门文章