加载页面等待效果

最新推荐文章于 2022-12-06 17:58:57 发布
最新推荐文章于 2022-12-06 17:58:57 发布
阅读量6.6k 收藏 2
点赞数
分类专栏： js及界面技术
  1. 当一个页面数据量太大时，可能需要加载较长时间，这期间看到的将是白屏，很不好吧。 
  2. 可以使用下面内容在页面加载时展示一些其他的东西，让人知道页面还在加载，而不是页面死了。或没有数据。 
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  4. <html> 
  5. <head> 
  6. <title> New Document </title> 
  7. <meta name="Generator" content="EditPlus"> 
  8. <meta name="Author" content=""> 
  9. <meta name="Keywords" content=""> 
  10. <meta name="Description" content=""> 
  11.     <style> 
  12.         .loadpagediv { 
  13.             display:none; 
  14.             position:absolute; 
  15.             top:30%; 
  16.             left:40%; 
  17.             width:25%; 
  18.             height:10%; 
  19.             background-color:green; 
  20.             border:10px solid blue; 
  21.             color:red; 
  22.         } 
  23.     </style> 
  24.     <script> 
  25.         var id = setTimeout('loadPage()',100); 
  26.         function loadPage() { 
  27.             // 取得文档载入状态，如果载入完成，则readystate='complete' 
  28.             // 根据这个可以定时去获取文档载入状态，来实现页面载入等待效果 
  29.             var readystate = document.readyState.toLowerCase(); 
  30.             if (readystate == 'complete') 
  31.             { 
  32.                 clearTimeout(id); 
  33.                 document.getElementById('loadpagediv').style.display =  "none"; 
  34.             } 
  35.             else { 
  36.                 document.getElementById('loadpagediv').style.display =  "block"; 
  37.                 id = setTimeout('loadPage()',100); 
  38.             } 
  39.  
  40.         } 
  41.     </script> 
  42. </head> 
  43.  
  44. <body> 
  45.     <div id="loadpagediv" class="loadpagediv"> 
  46.         正在加载页面。。。 
  47.     </div> 
  48. </body> 
  49. <iframe src="http://www.google.com" style="position:absolute;top:200px;left:200px;width:400px;height:200px;"></iframe> 
  50. </html> 
doymm2008
关注
专栏目录
Python网络爬虫Selenium页面等待：强制等待、隐式等待和显式等待
2401_83641491的博客
04-08 506
不同于显式等待，显式等待针对的是目标元素，而隐式等待针对的是全局的所有的元素。如果设置等待十秒，可以理解为在10秒内不停刷新整个页面，看目标元素是否加载出来。显式等待是单独针对某个元素，表明某个条件成立后才执行获取元素的操作。同上如果时间还没到找到了目标元素，就不再继续等待，程序继续执行。如果时间还没到找到了目标元素，就不再继续等待，程序继续执行。以下面代码为例，即目标标签加载出来出后，开始获取该标签。如果时间到了还没找到目标元素，就报错。如果时间到了还没找到目标元素，就报错。使整个脚本暂停运行。
js加载页面等待效果
07-07
在网页加载过程中，为了提供更好的用户体验，开发者经常使用JS来实现页面等待效果，即在内容完全加载之前展示一个等待动画或者提示，让用户知道页面正在努力加载。 "js加载页面等待效果"主要涉及到以下几个关键知识...
页面等待提示信息实现
wdmcln
04-14 429
此问题描述:   当前页面中包含有三个页面:            主页面,动态参数页面,展示页   主页面:       用于接收当前ID,以获取相应类实例的工作  动态参数页:      当前页面中隐藏表单,隐藏传递ID,BOOLEAN,STRING等控件值      当点击查询时,通过JAVASCRIPT方法提交当前表单,以获取当前状态的动态参数值,并生成动态参数字符串  展示页面:    ...
EasyUI界面加载等待效果
聆听晨雨的博客
04-03 3389
使用EasyUI tab页面，加载页面的时候 可能会渲染很慢，体验不是很好，加一个简单的等待效果吧。使用此脚本需要先引入easyui.js基础脚本。[javascript] view plain copyvar maskWidth = $(window).width();  var maskHeight = $(window).height();  var maskHtml = "&lt;div ...
selenium中设置页面等待
qq_41854124的博客
08-13 576
页面等待 这很重要！！！ 现在的网页越来越多采用了Ajax技术，这样程序便不能确定何时某个元素完全加载出来了。如果实际页面等待时间过长导致某个dom元素还没出来，但是你的代码直接使用了这个WebElement，那么就会抛出空指针的异常。 为了避免这种元素定位困难而且会提高产生ElementNotVisibleException的概率。所以Selenium提供了两种等待方式，一种是隐式等待，一...
CSS实现的loading页面等待效果
笨鸟快飞的专栏
06-11 3623
有些页面加载起来比较慢，为了加强用户体验效果，所以一般都会做一个页面加载等待的提示，页面加载完成后消失。下面是用CSS实现的一个简单的页面加载等待效果，大家可以参考： [html] view plaincopy span style="font-size:18px;">>   html>   head>   meta http-equiv="Con
Ajax网页加载等待状态插件
jiidd的专栏
03-24 228
&lt;script type="text/javascript" src="cvi_busy_lib.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" charset="utf-8"&gt; var tval, bval, rval, lval; function xxx() { //显示 var bod
jQuery EasyUI 页面加载等待及页面等待层
10-20
这里面包含了两个主要的功能点：一个是页面加载时的等待效果，另一个是基于EasyUI的页面等待提示层工具类的实现。 对于页面加载等待，文档提供了一个名为ajaxLoading的函数。这个函数会在页面加载时被触发，并创建...
页面加载等待效果
03-23
页面等待效果的实现方式多种多样，可以从简单的HTML/CSS实现到更复杂的JavaScript动画。以下是一些关键的技术点： 1. **CSS动画**：使用CSS3的`@keyframes`规则可以创建动画效果。通过定义动画的开始和结束状态，...
vue实现页面加载动画效果
08-29
Vue 实现页面加载动画效果是指在 Vue 应用程序中实现页面加载动画效果，使用户在等待页面加载时看到一个友好的提示信息。这种效果可以提高用户体验和应用程序的整体性能。 实现页面加载动画效果的思路是使用 Vue 的...
Selenium常用操作——页面等待
snailzzw的博客
11-15 245
Selenium常用操作——隐式等待与显示等待
4.3 模拟浏览器操作和页面等待（显示等待和隐式等待、句柄）
Triumph19的博客
06-11 500
模拟浏览器和页面等待
如何实现"请等待..."页面?
im056的专栏
07-02 765
如何实现"请等待..."页面? 在客户端实现可能很简单.你可以包装JSP页面(或者你想要隐藏的一部分)到一个div中,然后你可以添加更多div,当用户点击提交按钮时这些div出现.这些div可以包含gif动画和其他内容. 场景:当用户点击按钮,调用JS函数,该函数隐藏页面并且显示"请等待..."div.你可以使用CSS来自定义外观:下面是一个正常工作的例子:
在页面加载完毕前显示等待提示
小飞的专栏
01-16 4726
通常在显示大量内容的网页时，由于页面内容比较大下载速度慢，若能给用户有个等待提示那岂不是快哉。在这里我分析一个案例，使用的javascript脚本在客户端显示等待提示。首先介绍window.onload函数：在整个页面文档在下载完成之后才触发该动作；在文档下载之前，该函数对象为空的。（本人理解）下面我们看看代码，之前id=doing 的层为显示状态，将遮盖了页面的整个区域，下载完成后触发隐藏i
(三)打开新的页面与等待控制条
李赛赛的专栏
09-23 194
本节知识点 打开新的页面 打开新的页面 打开新的页面就必须要要用到mui.openwindow这个函数具体见代码 mui.openWindow({ url: 'open.html', //需要打开页面的url地址 id: 'open', //需要打开页面的url页面id ...
html + css实现等待页面动画效果，附部分属性解析
qq_52340302的博客
05-13 2208
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="./css/style.css"> <title></title> </head> <body> <div class="loading"> <span>Waiting.
jquery实现页面等待时的交互效果
hudeyong926的专栏
07-18 712
前端在请求后台有时候需要较长的一段时间，如果不给不用户一些提示性的消息，如正在加载之类的，用户可能会以为页面已死，所以还是得简单的做点交互才行。 思路详解： 在页面加载前就先加载一个div罩，等待页面全部加载完成后，关闭此div罩 .spinner { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s inf
前端小课堂-页面加载等待动画
最新发布
qq_42951382的博客
12-06 2406
当页面内容比较复杂时，页面内容需要较长的加载时间，用户在页面加载时长时间等待时，加入一些动画效果可以有效提高用户体验，这次为大家带来前端页面加载等待动画的加入过程和原理，为大家提供动画库，帮助大家了解设计方式。浏览器在进行页面加载时是按照文档从上到下加载的，部分在网页前面定义的内容会首先被加载；因此，我们可以把页面加载动画相关的内容写在页面最前面，保证页面加载时首先出现，当内容全部被加载后，使动画内容隐藏首先需要把动画内容写入页面，放在页面的最前面，并且设置宽度和高度与背景颜色，使动画能够覆盖整个页面
网页加载等待提示
xyfoog的专栏
10-13 1992
完整代码如下： &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;用于页面完全加载前提示&amp;amp;lt;/title&amp;amp;gt; &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;script language=&amp;quot;javascript&amp;quo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值