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

最新推荐文章于 2022-12-06 17:58:57 发布
最新推荐文章于 2022-12-06 17:58:57 发布
阅读量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实现页面重新加载
仗剑天涯，从摘要开始
12-14 1456
1、reload 方法，该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) 2、 replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用rep...
js实现操作等待提示loading……
weixin_30387423的博客
06-04 1309
　　js实现操作等待功能，防止重复提交，界面友好，底部为灰色遮罩层，防止用户重复操作。 　　先看效果图： 　　 　　接着看js代码： 1 //关闭等待窗口 2 function closeWaiting() { 3 var bgDiv = document.getElementById("bgDiv"); 4 var msgDiv = document....
页面加载等待功能(JSP)
02-03
一个页面加载等待页面的例子，只要嵌入到任意页面中，页面即具有加载等待的效果（JSP版的）
js添加loading加载样式
hilary_front的博客
09-28 5370
在数据没拿到前添加loading加载样式，其中var loadingMask = document.getElementById(‘loadingDiv’); loadingMask.parentNode.removeChild(loadingMask); 去除加载样式，自己选择加载图片。 `var _LoadingHtml = ‘’; document.write(_LoadingHtml
Selenium 鼠标和键盘操作
Louie
10-31 996
鼠标点击操作 鼠标点击事件有以下几种类型： 清单 1. 鼠标左键点击 Actions action = new Actions(driver);action.click();// 鼠标左键在当前停留的位置做单击操作 action.click(driver.findElement(By.name(element)))// 鼠标左键点击指定的元素 清单 2. 鼠标右键点击
js 实现页面等待效果
xlk的博客
06-25 803
先记录下，还没试验。 代码如下 var waiting = true; #('#userNameField').keyup(function(e){ if (waiting){ return; } setTimeout(function(){waiting = false;},300); // 等待300毫秒 // doSomething }
jquery实现页面等待加载“转圈”效果
weixin_40362806的博客
06-28 1958
jquery点击提交的 预转圈
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加载效果时，我们通常会...
js实现等待效果
fulq1234的专栏
05-14 1557
我新做的项目，初始加载页面时导入的数据量很大，需要做个等待效果。 我搜到一些代码，就是写个等待的遮盖层，让这个层显示和隐藏。 下面是实现方法 加一个样式 [color=blue] /* 加载等待的遮罩层样式 */ .datagrid-mask { position: absolute; left: 0; top: 0; width: 100%; height...
延迟加载JS的方式
m0_51431448的博客
07-16 4408
JS延迟加载就是等dom（页面）加载完成之后再加载js文件，这样有助于提高页面加载速度，用户体验更好一般延迟加载js方式有①defer属性②async属性③动态创建DOM④使用jq的getScript方法⑤使用setTimeout延迟加载脚本⑥将script引入放在最后（底部）加载其中比较重要的就是defer和async方式这里举个栗子a.jstest.html这时候会正常打印出div元素，这也就是我们上面说的放在底部最后执行。......
Javascript前端加载等待圆型圈提示实现效果
YunWisdom
08-31 1304
Javascript前端加载等待圆型圈提示实现效果 CSS内容 #loading { background-color: #9f9f9f; opacity: 0.15; height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top:...
js等待加载转圈圈效果
Lazyinit的博客
05-13 5481
首先引入js文件，jquery.js和spin.js css文件如下： <style type="text/css"> #foo { position: fixed; left: 0; top: 0; _position: absolute; ...
js加载等待效果
weixin_30872671的博客
01-21 522
demo01: 加载首页的时候，可能会很缓慢，放一张等待图片。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> ...
前端小课堂-页面加载等待动画
qq_42951382的博客
12-06 2333
当页面内容比较复杂时，页面内容需要较长的加载时间，用户在页面加载时长时间等待时，加入一些动画效果可以有效提高用户体验，这次为大家带来前端页面加载等待动画的加入过程和原理，为大家提供动画库，帮助大家了解设计方式。浏览器在进行页面加载时是按照文档从上到下加载的，部分在网页前面定义的内容会首先被加载；因此，我们可以把页面加载动画相关的内容写在页面最前面，保证页面加载时首先出现，当内容全部被加载后，使动画内容隐藏首先需要把动画内容写入页面，放在页面的最前面，并且设置宽度和高度与背景颜色，使动画能够覆盖整个页面
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实现页面加载等待转圈效果页面加载完毕之前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、付费专栏及课程。

余额充值