给页面加上loading加载效果

最新推荐文章于 2024-08-20 02:18:10 发布

大雄Obear

最新推荐文章于 2024-08-20 02:18:10 发布

阅读量3w

点赞数 4

分类专栏： WEB开发

本文链接：https://blog.csdn.net/bigbear00007/article/details/80742666

版权

WEB开发专栏收录该内容

55 篇文章 2 订阅

订阅专栏

在页面中载入进度条，是一种常见的特效。它比较实用，当页面的元素比较多的时候，使用它可以让网友不至于等的着急。其原理很简单：在网页的头部放置一个文字或者图片的 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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大雄Obear

关注关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html前端数据加载的loading效果

JackieDYH的博客

08-17

3678

<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <style type="text/css"> * { padding: 0; margin: 0; } .loading...

页面增加loading效果

JinSong

08-01

850

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #loading{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0.6;z-index:150...

参与评论您还未登录，请先登录后发表或查看评论

js实现页面加loading提示效果

05-05

js实现页面加loading提示效果,只需要将js引入，然后再需要的时候调用showLoading().当业务逻辑处理完毕后调用completeLoading（）就可以关闭loading。非常方便、比较好用。

原生前端系列-JavaScript+HTML+CSS实现12种常见加载画面

最新发布

weixin_40314361的博客

08-20

212

在现代Web开发中，加载动画不仅可以提升用户体验，还能在后台处理数据时有效地吸引用户注意力。本篇博客将通过原生的JavaScript、HTML和CSS技术，详细介绍12种常见的加载中画面的实现方法。这些动画不仅实用，还可以为我们的Web应用增添一份专业的感觉。一、光点闪烁效果描述：多个小光点按照一定的节奏依次闪烁，形成一...

给页面加上Loading效果最简单实用的办法

weixin_34090562的博客

11-09

703

其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：首先，在页面的最上部输出一个Loa...

基于Element-UI给Vue页面添加Loading效果

DZQ1223的博客

06-08

3615

基于Element-UI给Vue页面添加Loading效果1、引入2、在标签里面添加v-loading3、在data中定义4、调用后端接口之前设置true，返回数据画图后设置false 1、引入 import { Loading } from 'element-ui' 2、在标签里面添加v-loading <div v-loading="loadLoading" id="chart-load" class="chart-load"></div> 3、在data中定义 export

页面加载时加Loading效果

weixin_30572613的博客

07-13

422

html <div id="loading"><img src="img/load1.gif" id="loading" /></div> css #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; ...

js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

10-21

在Web开发中，为了解决页面加载时间过长给用户带来的不良体验，通常会采用在页面完全加载之前显示一个加载提示（loading提示效果）的方法。本实例中将使用JavaScript技术来实现这一效果，并提供完整的示例代码供读者...

vue跳转页面增加等待_vue-router懒加载时添加loading效果

weixin_35262577的博客

12-23

2208

近期在做一个微信公众号的项目，在页面跳转时发现页面会闪一下，用户体验很不好，而且如果网慢时页面是没有数据的样式会乱很丑。于是乎，就百度看了前人的各种解决方案，个人觉得以下链接中的方案还是很好的，代码简洁，效果也很满意，不需要每个页面做相对应的操作只需要在router.js文件中添加几行代码即可。唯一的缺点就是在Android运行没问题，但是ios会有时关不上loading效果一直处于loading...

HTML5等待加载动画效果

09-28

HTML5是目前广泛使用的网页标准，它引入了许多新的元素和API，其中就包括为改善用户体验而设计的等待加载动画效果。在本篇文章中，将向大家展示如何利用HTML和CSS技术，加上少量JavaScript来创建具有吸引力的加载...

axios vue 加载效果动画_vue+elementUI+axios实现的全局loading加载动画

weixin_39972996的博客

12-21

237

在项目中，很多时候都需要loading加载动画来缓解用户的焦虑等待，比如说，我打开了一个页面，而这个页面有很多接口请求，但浏览器的请求并发数就那么几个，再加上如果网速不行的话，那么这时候，用户很可能就会纠结自己到底该不该留下来继续等待呢。所以，这时候，loading动画就是一种缓解等待情绪的方式，当然还有更高端的，比如：骨架屏。有兴趣的朋友可以自行研究，我后续也会找机会分享一下。下面，开始本文的主...

页面loading效果之一

02-03

页面loading效果之一! 很值得下载看看!资源免费,大家分享!!

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

10-22

主要介绍了基于javascript实现页面加载loading效果的相关资料，感兴趣的小伙伴们可以参考一下

js实现页面加载完毕之前loading提示效果

06-10

js实现页面加载完毕之前loading提示效果：在页面上所有的DOM没有加载完毕之前，我们想让页面正中间显示一个“页面加载中，请稍后...”的字样，此效果正是，样式可以根据自己的需求改动！！！

前端翻书加载loading效果demo可直接使用

06-01

电子图书翻页加载loading,电子书在加载的时候使用这个功能

前端loading效果的实现

热门推荐

Maogo的专栏

08-23

1万+

说到页面loading效果，现在各种PC端和移动端的应用使用loading都十分的广泛，这是因为页面的加载时需要时间的，如果页面加载很快，loading的作用可能还不是特别能够体现，但是如果当页面加载速度不是很快甚至很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）那么就会十分的影响用户体验，页面加载所需要时间

网页Loading效果

weixin_30847939的博客

03-29

245

问题描述:由于项目要求在页面提交以及加载的时候，有短暂的卡顿，需要用loading过渡。 1.下一个页面加载的时候实现： base-loading.js //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement....

loading加载效果（纯css）

m0_61004873的博客

09-20

1961

页面loading加载效果

页面加载过程 loading加载特效

2301_77547099的博客

04-20

233

然后在下一行代码最后加入。来判断加载动画是否终止。在async函数中设置。

html+css+js给整个页面加上一个加载动画

05-31

您可以在页面中添加一个遮罩层，并在其中添加加载动画，来模拟整个页面加载的效果。下面是一个示例代码： HTML： ```html <div id="loading"> <div class="loader"></div> </div>  <div id="page-content">  </div> ``` CSS： ```css /* 遮罩层 */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: 9999; } /* 加载动画 */ .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 隐藏遮罩层 */ #page-content { display: none; } .loaded #page-content { display: block; } ``` JavaScript： ```js // 页面加载完成后隐藏加载动画 window.addEventListener('load', function() { document.querySelector('#loading').classList.add('loaded'); }); ``` 这样，页面加载时就会显示一个遮罩层和一个加载动画，当页面加载完成后，加载动画会隐藏，显示页面内容。您可以根据需要调整加载动画的样式和遮罩层的透明度等属性。