js实现页面加载的等待效果

最新推荐文章于 2024-02-04 15:50:30 发布
最新推荐文章于 2024-02-04 15:50:30 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baby414/article/details/83839919
版权
页面实现加载时的等待效果

原理是在需要等待的页面区域加一个层先覆盖加载中的页面,等待数据加载完成后把层隐藏掉

<div id="ld" style="position:absolute; left:-1px; top:1px; width:100%; height:100%; background-color:#FFFFFF; z-index:1000;">
<div id="center" style="position:absolute;">
<table border="0">
<tr><td><span id="disp">页面加载中,请等待...</span></td></tr>
<tr><td><img src="/common/image/2.gif"></td></tr>
</table>
</div>
</div>

<script language="JavaScript">
function winload(){
ld.style.display="none";
f8=true;
}
</script>


<div οnlοad="winload();">

有些时候页面加载时间很短,就看不到等待的效果,可以把onload函数改成下面的,就可以看到效果了

<script language="JavaScript">
function winload(){
setTimeout(
function(){
alert("111111");
ld.style.display="none";
f8=true;
},1000);

}
</script>

div部分的代码写在<head>之后
baby414
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现操作等待提示loading……
weixin_30387423的博客
06-04 1313
　　js实现操作等待功能，防止重复提交，界面友好，底部为灰色遮罩层，防止用户重复操作。 　　先看效果图： 　　 　　接着看js代码： 1 //关闭等待窗口 2 function closeWaiting() { 3 var bgDiv = document.getElementById("bgDiv"); 4 var msgDiv = document....
Selenium 鼠标和键盘操作
Louie
10-31 998
鼠标点击操作 鼠标点击事件有以下几种类型： 清单 1. 鼠标左键点击 Actions action = new Actions(driver);action.click();// 鼠标左键在当前停留的位置做单击操作 action.click(driver.findElement(By.name(element)))// 鼠标左键点击指定的元素 清单 2. 鼠标右键点击
js 实现页面等待效果
xlk的博客
06-25 804
先记录下，还没试验。 代码如下 var waiting = true; #('#userNameField').keyup(function(e){ if (waiting){ return; } setTimeout(function(){waiting = false;},300); // 等待300毫秒 // doSomething }
前端小课堂-页面加载等待动画
qq_42951382的博客
12-06 2352
当页面内容比较复杂时，页面内容需要较长的加载时间，用户在页面加载时长时间等待时，加入一些动画效果可以有效提高用户体验，这次为大家带来前端页面加载等待动画的加入过程和原理，为大家提供动画库，帮助大家了解设计方式。浏览器在进行页面加载时是按照文档从上到下加载的，部分在网页前面定义的内容会首先被加载；因此，我们可以把页面加载动画相关的内容写在页面最前面，保证页面加载时首先出现，当内容全部被加载后，使动画内容隐藏首先需要把动画内容写入页面，放在页面的最前面，并且设置宽度和高度与背景颜色，使动画能够覆盖整个页面
js实现等待加载“转圈圈”效果
热门推荐
jack_yih的博客
06-29 2万+
js代码:                     function showLoading(show){ if(show){    document.getElementById("over").style.display = "block";    document.getElementById("layout").style.display = "block"; }else{ d
js加载页面等待效果
07-07
在网页加载过程中，为了提供更好的用户体验，开发者经常使用JS来实现页面等待效果，即在内容完全加载之前展示一个等待动画或者提示，让用户知道页面正在努力加载。 "js加载页面等待效果"主要涉及到以下几个关键知识...
js实现页面加载完毕之前loading提示效果
06-10
在本文中，我们将深入探讨如何使用JavaScript实现页面加载完毕之前的“loading”提示效果。这个效果可以在页面内容完全加载之前，向用户展示一个“页面加载中，请稍后...”的提示，以提升用户体验，避免用户在等待...
vue实现页面加载动画效果
08-29
Vue 实现页面加载动画效果是指在 Vue 应用程序中实现页面加载动画效果，使用户在等待页面加载时看到一个友好的提示信息。这种效果可以提高用户体验和应用程序的整体性能。 实现页面加载动画效果的思路是使用 Vue 的...
JavaScript实现网页加载进度条代码超简单
10-23
本文将详细介绍如何使用JavaScript和jQuery来实现一个简单的网页加载进度条。 首先，我们需要理解，浏览器本身并不提供精确的页面加载进度接口，因此我们无法根据实际加载的数据量来计算百分比。不过，我们可以利用...
js实现页面loading加载效果1.rar
07-25
本文将详细介绍如何使用JavaScript实现页面的loading加载效果。 一、基本原理 JavaScript是一种广泛使用的客户端脚本语言，它可以动态地更新HTML和CSS，从而实现各种动画效果。在创建loading加载效果时，我们通常会...
页面加载等待功能(JSP)
02-03
一个页面加载等待页面的例子，只要嵌入到任意页面中，页面即具有加载等待的效果（JSP版的）
js加载等待效果
10-12
js加载等待效果，原理点击后创建层，onclick事件触发
js加载等待效果，原理点击后创建层，onclick事件触发
08-05
js加载等待效果，原理点击后创建层，onclick事件触发
js css loader加载等待
u014644574的博客
03-18 897
js css loader加载等待
一个非常简易 又好看的 页面正在加载效果的资源 jquery - loading
trouble is a friend
10-25 1万+
资源地址：https://download.csdn.net/download/qq_25221835/10746287 需要的可以去下载 首先看效果： 需要js: loading.js 和 jquery.js css: 代码： （1）引入 资源文件 （2）编写 js 代码，removeLoading 是使 加载 结束 （rgba ...
一个好看的js加载loading的div样式
u012698249的博客
09-22 5837
一个好看的js加载loading的div样式
javascript实现页面加载loading动画(附完整源码)
最新发布
weixin_45912344的博客
02-04 1675
4.开发利用的是组件化开发，在main.js中存储的是数据（状态管理，使用的是pinia)1.创建一个CSS样式，用于显示loading动画。5.在request.js接口请求和响应拦截时做处理。
js实现页面加载动画
rentian1的博客
08-18 1万+
//获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var _LoadingTop = _Pag
python能做页面加载动画吗_css实现页面加载动画
weixin_39855843的博客
12-04 205
正在加载中...........html,body,#loading {height: 100%;margin: 0px;padding: 0px;}.chromeframe {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}#loader-wrapper {position: fixed;top: 0;left: 0;...
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、付费专栏及课程。

余额充值