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. 利用Grahics 进行图片裁剪

    这两天做了一个图片对比工具,里面要处理两张大的图片,所以要对图片先进行裁剪最开始用了 /// <summary>        /// 裁剪图片        /// </summa ...

  2. html 颜色在线取色器

    推荐一个链接 还不错 http://www.atool.org/colorpicker.php

  3. SQL Server ->> 深入探讨SQL Server 2016新特性之 --- Row-Level Security（行级别安全控制）

    SQL Server 2016 CPT3中包含了一个新特性叫Row Level Security(RLS),允许数据库管理员根据业务需要依据客户端执行脚本的一些特性控制客户端能够访问的数据行,比如,我 ...

  4. redis基本操作命令

    前面我们看了redis的简介安装和数据类型,接下来介绍一下redis基本数据类型的操作命令: 一:redis键值对的管理和操作 DEL key 该命令用于在 key 存在时删除 key. DUMP k ...

  5. 爬虫入门之Scrapy框架实战(新浪百科豆瓣)(十二)

    一 新浪新闻爬取 1 爬取新浪新闻(全站爬取) 项目搭建与开启 scrapy startproject sina cd sina scrapy genspider mysina http://roll ...

  6. Ubuntu双系统安装过程中遇到的问题

    1.在第六步选择时区的时候,会报错,这时候可以选择断开网络(取消右上角的网络选项)! 2.用easybcd添加启动项以后,无法进入,F12进入BIOS,选择Ubuntu进入,因为以前的BIOS BOO ...

  7. node-7.2.1 already installed, it's just not linked

    直接在terminal下运行以卸载node和nvm: sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,shar ...

  8. postgres if ，when及判断表是否存在的sql编写

    判断表是否存在方法1: SELECT THEN END FROM ( select count(*) as cc from pg_class where relname = 'wo' --wo is ...

  9. WebSphere Studio Application Developer 5.0 优化设置

    公司有一个项目需要用到WebSphere Studio Application Developer 5.0 的开发环境,这个环境比较老,而且只能用JDK1.4. 项目开发的时候 总是报错: JVM t ...

  10. Allocate exception for servlet ValidateUsernameServlet 异常

    如果eclipse无法对类文件进行编译那么运行时就会发生 Allocate exception for servlet ValidateUsernameServlet 异常,说找不到类.