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. tcp三次握手和四次挥手（2）

      背景描述 通过上一篇中网络模型中的IP层的介绍,我们知道网络层,可以实现两个主机之间的通信.但是这并不具体,因为,真正进行通信的实体是在主机中的进程,是一个主机中的一个进程与另外一个主机中的一个进 ...

  2. 【Leetcode】【Medium】Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  3. Python学习---模版/包的概念

    1.1. 模块/包的概念 在Python中,一个.py文件就称之为一个模块(Module) 模块一共三种: python标准库 第三方模块 应用程序自定义模块 模块的使用:模块是用来组织函数的 解释器 ...

  4. .Net深入体验与实践第一章

    什么是委托?委托和事件是什么关系? 我的理解是委托朋友,事件是一个事情比如,中午12点要吃饭了,咱家搞忘了!还在继续嗨皮,我的朋友会叫我与他一起吃饭. 什么事反射? 可以获取.Net中的每个类型(类, ...

  5. MS15-051 修正版Exploit(Webshell可用)

    MS15-051简介:Windows 内核模式驱动程序中的漏洞可能允许特权提升 (3057191) , 如果攻击者在本地登录并可以在内核模式下运行任意代码,最严重的漏洞可能允许特权提升. 攻击者可随后 ...

  6. 在自己机器上实现apache的多域名

    自己机器上有3个目录,分别是/var/www/html/                             /var/www/solaris/                           ...

  7. excel 在web导入到数据库的操作方法

    这个操作的大致步骤是把本地文件存入到服务器端,然后再读取服务端的文件并且使用NPOI这个第三方的插件去读取文件导入到数据库批量插入需要注意的是,前端需要使用form包裹type=file的文件标签,并 ...

  8. Oracle表空间、段、区和块简述

    本文转载自:http://blog.itpub.net/17203031/viewspace-682003/ 在Oracle学习过程中,存储结构,表段区块可能是每个初学者都要涉及到的概念.表空间.段. ...

  9. Hibernate双向一对多、双向多对多关联关系中的映射文件怎么写

    这里以一对多关联关系为例.以Country类为一端,Competition类为多端. 一个国家可以有多个赛事,但是一个赛事只能属于一个国家. Country类 public class Country ...

  10. 在一个应用中如果同一个Spring 的IOC容器被实例化两次就会出现 CannotAcquireResourceException 异常

    现象描述:我在一个Junit 的测试类中实例化IOC容器 : ac = new ClassPathXmlApplicationContext("applicationContext.xml& ...