demo01:

加载首页的时候，可能会很缓慢，放一张等待图片。

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title> New Document </title>  
  5.  
  6. <style type="text/css">
  7. .loadpagediv{
  8.     width:160px;
  9.     height:56px;
  10.     position: absolute;
  11.     top:50%;
  12. margin-left:-80px;
  13. margin-top:-28px;
  14.     left:50%;
  15.     background: url(https://m.baidu.com/static/search/ico_loading.gif) no-repeat;
  16.     z-index:9999;
  17. }
  18. </style>
  19.     <script>
  20.         var id = setTimeout('loadPage()',100);
  21.         function loadPage() {
  22.             // 取得文档载入状态，如果载入完成，则readystate='complete'
  23.             // 根据这个可以定时去获取文档载入状态，来实现页面载入等待效果
  24.             var readystate = document.readyState.toLowerCase();
  25.             if (readystate == 'complete')
  26.             {
  27.                 clearTimeout(id);
  28.                 document.getElementById('loadpagediv').style.display =  "none";
  29.             }
  30.             else {
  31.                 document.getElementById('loadpagediv').style.display =  "block";
  32.                 id = setTimeout('loadPage()',100);
  33.             }  
  34.  
  35.         }
  36.     </script>
  37. </head>  
  38.  
  39. <body>
  40.     <div id="loadpagediv" class="loadpagediv">  </div>
  41. </body></html>

代码

已经进入页面，ajax获取数据时候，可能也要等待，这个时候也可以放一张GIF图片。当ajax获取数据成功时，在js中控制显示隐藏即可

<div class="scrollbox">

<image class="imagebar" src="../static/images/time.gif"></image>

</div>

js加载等待效果的更多相关文章

  1. 手机站全局的html+css加载等待效果

    本文只提供思路,CSS神马的自己定制吧,JS是可以优化的,比如,输出图片的JS也可以放到showdiv()里面,我没有做优化,只是实现,别笑话我,我比较懒... 基本思路:由于Html的解析是从上到下 ...

  2. jquery Mobile点击显示加载等待效果

    点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...

  3. C#.Net网页加载等待效果漂亮并且简单

    最近网页加载数据比较多,点击后给用户就是白板很不友好,想了很久找了些资料,在网页加载中显示等待画面给客户,页面加载完成自动隐藏等待效果. 在网页后台cs代码:    protected void Pa ...

  4. 利用PreLoader实现一个平视显示（HUD）效果（可以运用到加载等待效果），并进行简单的讲解

    什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画 ...

  5. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

  6. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  7. jQuery8种不同的瀑布流懒加载loading效果

    优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...

  8. Ladda – 把加载提示效果集成到按钮中，提升用户体验

    Ladda 是一组集成了加载提示的按钮,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验.主要用于在用户点击提交之后,向用户提供即时的反馈,让他们知道浏览器正在处用户提交的任务. 您可能感兴趣的 ...

  9. (转)JS加载顺序

    原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...

随机推荐

  1. 【转】Web服务器之Nginx详解（理论部分）

    大纲 一.前言 二.Web服务器提供服务的方式 三.多进程.多线程.异步模式的对比 四.Web 服务请求过程 五.Linux I/O 模型 六.Linux I/O 模型具体说明 七.Linux I/O ...

  2. HTML5时代的纯前端上传图片预览及严格图片格式验证函数（转载）

    原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代 ...

  3. Excel使用SUMIF函数注意事项

    sumif函数的公式使用方法如下: =sumif(查询匹配的区域,条件,汇总求和的区域) 条件可以是“>10”或"=10"这种格式.其中“查询匹配区域”和“汇总求和区域”需要 ...

  4. 【Leetcode】【Medium】Flatten Binary Tree to Linked List

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...

  5. [问题记录]cocos的lua绑定安装pyyaml报错

    描述:按照readme中的文档操作报错,提示python2.7没有安装,但是确实已经安装了,而且也设置环境变量成功了. 解决: 在D盘新建register.py的文件,内容如下: # # script ...

  6. 第一周 day1 Python学习笔记

    为什么要学习Python? Python擅长的领域 1. python2.x中不支持中文编码,默认编码格式为ASCII码,而python3.x中支持Unicode编码,支持中文,变量名可以为中文,如: ...

  7. Ubuntu中的两种link的区别

    Ubuntu中有两种link(windows世界中文件的“快捷方式”),一个是hard link(硬链接),另一个是symbolic link(软链接). 那么,什么是硬链接,什么又是软链接呢? 硬链 ...

  8. 【Asp.Net MVC】asp.net mvc Model验证总结及常用正则表达式

    转自:http://www.cnblogs.com/easy5weikai/p/3843131.html 关于Model验证官方资料: http://msdn.microsoft.com/zh-cn/ ...

  9. [原]零基础学习SDL开发之在Android使用SDL2.0加载字体

    在上一篇文章我们知道了如何在android使用SDL2.0来渲染显示一张png图,而且在上上一篇我们知道如何使用sdl来渲染输出bmp图,那么sdl是否可以渲染输出自己喜爱的字体库的字体呢?答案是当然 ...

  10. Intellij IDEA快速补全System.out.print : sout