demo01:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> New Document </title>  

<style type="text/css">

.loadpagediv{

    width:160px;

    height:56px;

    position: absolute;

    top:50%;

margin-left:-80px;

margin-top:-28px;

    left:50%;

    background: url(https://m.baidu.com/static/search/ico_loading.gif) no-repeat;

    z-index:9999;

}

</style>

    <script>

        var id = setTimeout('loadPage()',100);

        function loadPage() {

            // 取得文档载入状态，如果载入完成，则readystate='complete'

            // 根据这个可以定时去获取文档载入状态，来实现页面载入等待效果

            var readystate = document.readyState.toLowerCase();

            if (readystate == 'complete')

            {

                clearTimeout(id);

                document.getElementById('loadpagediv').style.display =  "none";

            }

            else {

                document.getElementById('loadpagediv').style.display =  "block";

                id = setTimeout('loadPage()',100);

            }  

        }

    </script>

</head>  

<body>

    <div id="loadpagediv" class="loadpagediv">  </div>

</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. Azure DocumentDB 正式发布

    DocumentDB 简介 一种 NoSQL JSON 数据库 Azure DocumentDB 提供完全托管的 NoSQL 数据库服务,高度可用,自动缩放,开发简易,可以加速并预测性能.它适合诸如 ...

  2. tomcat运行报错Failed to start component [StandardEngine[Catalina].StandardHost[localhost].

    tomcat运行报错Failed to start component [StandardEngine[Catalina].StandardHost[localhost].多半情况是找不到jar包 解 ...

  3. sql server 获取表结构和记录数

    表结构 then d.name else null end) 表名, a.colorder 字段序号,a.name 字段名, ( then '√'else '' end) 标识, (case when ...

  4. IONIC调用原生的等待对话框

    ngCordova提供了progressIndicator插件,用以方便的显示等待对话框,但是目前版本仅支持安卓版本.为了让苹果版本也显示,可以到以下地址下载通用的插件,JS部分的代码无需改变: ht ...

  5. python全栈学习笔记（三）网络基础之网络设备及架构介绍

       

  6. Mac终端下 连接 ubuntu 16.04 ssh root@*.*.*.* permission denied 问题解决方案

    默认 Ubuntu 不开启 ssh 服务 (1)检查是否开启SSH服务  命令:ps -e|grep ssh  查看SSH服务是否开启,或者通过命令:service sshd status 可以查看某 ...

  7. 【深入理解JAVA虚拟机】第二部分.内存自动管理机制.4.JVM工具

    1.概述 工具作用:性能监控与故障处理 工作原理:分析数据 数据包含:运行日志. 异常堆栈. GC日志. 线程快照(threaddump/javacore文件). 堆转储快照(heapdump/hpr ...

  8. 从0开始学CentOS7（2）---安装mariaDB、jdk1.8、redis

    继续前面的基础步骤~ 这个是centos7自带的数据库MariaDB,以前是mysql,到7以后,改为MariaDB... 1. MariaDB安装,没有往深处配置...懒得动了..参考:http:/ ...

  9. C#内存复制结构

    C++中定义结构如下,需要转化成C#的结构 typedef struct tagNET_DVR_CID_ALARM{    DWORD dwSize;    BYTE sCIDCode[CID_COD ...

  10. postgresql+postgis+pgrouting实现最短路径查询（3）－－流程图

    项目结束,做一个项目的总结汇报,就把最短路径查询的实现流程图画了一下,现在补出来: