js实现页面加载完毕之前显示Loading效果

最新推荐文章于 2022-09-27 09:57:46 发布
最新推荐文章于 2022-09-27 09:57:46 发布
阅读量669 收藏 1
点赞数
分类专栏： 前端 js JavaScript 文章标签： 加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qubernet/article/details/82920839
版权
前端 同时被 3 个专栏收录
103 篇文章 0 订阅
订阅专栏
js
83 篇文章 0 订阅
订阅专栏
JavaScript
52 篇文章 0 订阅
订阅专栏

页面加载完毕之前显示Loading效果

 

 

一、首先在body的最前面加入显示的Loading div区域：

<div id="PageLoadingEffect"></div>

 

二、设置Loading div区域的样式：

#PageLoadingEffect{position:absolute; left:0px; top:0px; background:white url('../QB_Image/QB_COM/QB_loading.gif') no-repeat center; width:100%; height:100%;z-index:99999;}

 

三、在页面所有JS方法执行完毕后在执行以下代码：

    $("#PageLoadingEffect").hide();

qubernet
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现页面加载完毕之前loading提示效果
06-10
js实现页面加载完毕之前loading提示效果：在页面上所有的DOM没有加载完毕之前，我们想让页面正中间显示一个“页面加载中，请稍后...”的字样，此效果正是，样式可以根据自己的需求改动！！！
js网页Loading效果，让页面加载完再显示
weixin_30847271的博客
09-09 707
提供一个思路：<body>顶部放一个position:fixed的 loading 遮罩，覆盖整个页面。然后用 JS 在onload事件里把这个遮罩隐藏掉就行了。 <html> <head> <title>Test</title> <style> .loading { 　　po...
简单实用的JS实现页面加载完毕之前loading提示效果(兼容性较强的loading载入代码)
qq224428的博客
10-05 6816
简单实用的JS实现页面加载完毕之前loading提示效果 做成js调用： 一、JS代码： //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loa...
纯js css3 实现loading demo
牛尊堡的砖窑
07-29 933
提供 show    redo  hide 三个函数 支持callback，自动隐藏，锁屏幕不可滚动 loading.js var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return {
Javascript实现loading的效果
Teng_s2000的专栏
04-09 3011
进入网页前显示一个Loading效果：//运行文本域代码function runEx(control) { cod=document.getElementById(control); var code=cod.value; if (code!="") { var newwin
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
10-21
主要介绍了js实现的页面加载完毕之前loading提示效果,结合完整实例形式分析了js页面加载时显示loading效果的实现技巧,需要的朋友可以参考下
JavaScript实现网页加载进度条代码超简单
10-23
本文将详细介绍如何使用JavaScript和jQuery来实现一个简单的网页加载进度条。 首先，我们需要理解，浏览器本身并不提供精确的页面加载进度接口，因此我们无法根据实际加载的数据量来计算百分比。不过，我们可以利用...
Loading网页加载进度条动画效果特效代码
03-20
例如，我们可以使用`$(document).ready()`来确保页面加载完毕后执行我们的代码，再利用`$.animate()`函数为进度条创建平滑的过渡效果。 CSS3的animation属性则提供了更强大的动画控制。通过定义关键帧（keyframes）...
JavaScript 实现loading加载效果实现页面遮罩层
热门推荐
China_Guanq的博客
08-03 1万+
1、引入需要JS文件&lt;script src=&quot;js/page-over.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;2、HTML页面加载 遮罩块代码如下。 &lt;div id=&quot;overlay&quot;&gt;&lt;/div&gt;3、JavaScript 如何实现打开 和 关闭遮罩
纯js实现loading覆盖层
qq_41756580的博客
09-27 953
纯js实现loading覆盖层，可在任意div内添加覆盖层，调用很方便
JS加载等待效果
12-05
JS加载等待效果，所有页面继承自BasePage类， 每次页面加载前都会自动调用JS特效，页面数据加载完毕后自动隐藏并显示具体内容。
页面加载等待效果
03-23
当页面数据量较大，加载时间过长时，页面中央可以弹出正在加载提示的一个旋转效果
javascript实现一个网页加载进度loading
11-26
loading随处可见，比如一个app经常会有下拉刷新，上拉加载的功能，在刷新和加载的过程中为了让用户感知到 load 的过程，我们会使用一些过渡动画来表达。最常见的比如“转圈圈”，“省略号”等等。 网页loading有很多用处，比如页面的加载进度，数据的加载过程等等，数据的加载loading很好做，只需要在加载数据之前（before ajax）显示loading效果，在数据返回之后（ajax completed）结束loading效果，就可以了。 但是页面的加载进度，需要一点技巧。 页面加载进度一直以来都是一个常见而又晦涩的需求，常见是因为它在某些“重”网页（特别是网页游戏）的应用特别重要；
js等待提示，页面提交等待载入效果
03-29
js等待提示js等待提示js等待提示js等待提示js等待提示js等待提示js等待提示js等待提示
Ajax页面载入，等待特效
09-11
非常棒的Ajax页面载入,有演示页面,调用页面,和效果页,调用非常方便！只有你想不到的ajax等待特效，没有做不到的等待特效！
js实现的页面加载完毕之前loading提示效果完整示例
09-29 231
//获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var _LoadingTo...
记页面加载之前的loading效果
znbb_的博客
07-02 1351
最近做H5页面，内嵌到安卓端的APP内，需求是要在页面所有数据请求完毕之前显示loading图标提示用户等待，因为在手机端的网速很大程度上是不确定的，loading等待在用户体验度上确实比较友好。 话不多说，结合代码直接看效果 1.HTML结构部分 <div class="mask" id="mask_id"> <div class="mask_loading"&g...
页面加载完成前显示LOADING....
weixin_30236595的博客
08-04 1809
<html> <head> <title></title> <script type="text/javascript"> var url = 'http://www.163.com'; //the Next page you want to disp...
vue项目未加载完成前显示loading样式
jiangjunyuan168的博客
05-11 2268
1、在index.html中添加元素和绑定样式 <body> <div id="appLoading"> <div class='loading'></div> </div> <div id="app" style="display: none"></div> </body> <style media="screen" type="text/css">
JS实现页面加载等待转圈效果页面加载完毕之前loading提示效果...
最新发布
06-07
你可以使用JavaScript和CSS来实现一个页面加载等待转圈效果，具体方法如下： 1. 在HTML中添加一个元素作为等待动画的容器，例如： ```html <div id="loader"></div> ``` 2. 在CSS中，为该元素添加样式，如下： ```css #loader { border: 8px solid #f3f3f3; /* 转圈的边框 */ border-top: 8px solid #3498db; /* 转圈的顶部边框 */ border-radius: 50%; /* 将边框变为圆形 */ width: 60px; /* 宽度 */ height: 60px; /* 高度 */ position: fixed; /* 固定定位 */ top: 50%; /* 距离顶部50% */ left: 50%; /* 距离左侧50% */ transform: translate(-50%, -50%); /* 居中显示 */ z-index: 999; /* 置于最上层 */ display: none; /* 默认隐藏 */ } #loader.show { display: block; /* 显示 */ } ``` 3. 在JavaScript中，为页面加载事件添加一个监听器，并在页面加载之前显示加载动画，如下： ```js window.addEventListener('load', function() { var loader = document.getElementById('loader'); loader.classList.remove('show'); // 隐藏加载动画 }); document.addEventListener('DOMContentLoaded', function() { var loader = document.getElementById('loader'); loader.classList.add('show'); // 显示加载动画 }); ``` 这样就完成了一个简单的页面加载等待转圈效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值