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. 仿照jQuery进行一些简单的框架封装（欢迎指教~）

    (function(window,undefined){ var arr = [], push = arr.push, slice = arr.slice; //首先要做的就是封装一个parseHtm ...

  2. AWS的load balance

    Route53实现了地理上的load balance; ELB实现了region内的load balance CloudFront实现了静态内容的全网加速 ZULh?*;&T(

  3. linux下网络编程学习——入门实例ZZ

    http://www.cppblog.com/cuijixin/archive/2008/03/14/44480.html 是不是还对用c怎么实现网络编程感到神秘莫测阿,我们这里就要撕开它神秘的面纱, ...

  4. February 14 2017 Week 7 Tuesday

    Love lives in cottages as well as in courts. 爱情无贵贱,贫富皆有之. Many people, especially boys, complain tha ...

  5. angularJS报错$apply already in progress的原因和解决方法

    如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中 ...

  6. canvas的两个方法说明

    今天在用canvas的时候,发现有两个方法比较陌生,在此记录详细说明一下. (1)文本绘制的一个方法 canvas.drawTextOnPath(text, path, hOffset, vOffse ...

  7. 【[SHOI2009]会场预约】

    同样是从试炼场点进来的,这是一道非常需要耐心的题 不过明明就是我太菜了,真正的大佬都是一眼秒吧 首先我们有一种比较常规的暴力思路,就是用线段树来维护区间连续子段数,而拒绝掉所有与当前区间相冲突的预约我 ...

  8. Linux CentOS6系统安装最新版本Node.js环境及相关文件配置

    Node.js,当前应用非常广泛的Javascript运行环境,采用C++编写的,目前应用较多的用于WEB应用中,执行效率还是非常高的,虽然老左不从业程序的开发,但是有些时候在玩VPS的时候还是会遇到 ...

  9. 关于Git学习推荐

    Git学习除了推荐官方网站:https://git-scm.com/之外, 我个人比较推荐初学者或者被动使用者可以学习参考廖雪峰的这个教程:https://www.liaoxuefeng.com/wi ...

  10. 面试准备——（二）专业知识（1）Linux

    面试的问题: 腾讯: 1. 查看进程的命令 美团: 1. 常用的命令——美团/滴滴 2. 如何在性能测试的时候查看进程 3. kill -9/-15区别 滴滴: 1.如何找到一个特定文件 2. 如何替 ...