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. Java通过jna调用c++动态库

    1 环境准备 操作系统:windows 10,x64 jna,jna-4.4.0.jar c++开发环境,vc2013 java开发环境,eclipse,jdk8 2 dll开发 通过vc2013创建 ...

  2. 推卡：“积分侠”的福利 广发DIY信用卡

    广发diy信用卡最大的优势在持卡人在三大类商户刷卡消费可享受3倍积分优惠,很多卡友不知道这些商户到底有哪些,以及商户mcc码是什么,下面和小编一起来看看. 可享受3倍积分的商户类型 持卡人可在以下三大 ...

  3. 微软智能云的核心DNA

    你知道吗? 今天,微软智能云平台运行于全球30个区域,体量超过了两大云服务商亚马逊和谷歌的总和: 今天,在全球范围内超过85%的财富五百强企业都使用了微软Azure云服务,而中国部分的用户也达到了六万 ...

  4. C++程序运行时间-ZZ

    [15.5.25]贴一段实用的代码,linux下跑过. #include <stdio.h> /* printf */ #include <time.h> /* clock_t ...

  5. dll的制作

    https://blog.csdn.net/guanchanghui/article/details/1621031

  6. 沉淀，再出发：Git的再次思考

    沉淀,再出发:Git的再次思考 一.前言 使用git也有很久了,后来有一段时间一直没有机会去使用,现在想来总结一下自己学习了这么长时间的一些心得感悟,我写的博客一般都是开了一个轮廓和框架,等到以后有所 ...

  7. ZT 七大寡头

    网易评论人才辈出啊!!!看下面   http://comment.news.163.com/news_guoji2_bbs/9GRIIJA90001121M.html 关注 关注他的微博yftyfm ...

  8. hdu-3074 Multiply game---线段树+单点更新

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3074 题目大意: 给一些数,进行点更新或者是区间计算乘积 解题思路: 裸的线段树,注意空间开大点 # ...

  9. Java对象表示方式1：序列化、反序列化的作用

    1.序列化是的作用和用途 序列化:把对象转换为字节序列的过程称为对象的序列化. 反序列化:把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存 ...

  10. Django 玩转API

    现在,让我们进入Python的交互式shell,玩转这些Django提供给你的API. 使用如下命令来调用Python shell: $ python manage.py shell 我们使用上述命令 ...