jquery显示loading图片直到网页加载完成的方法


Posted in Javascript onJune 25, 2015

本文实例讲述了jquery显示loading图片直到网页加载完成的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>
<html class="no-js">
<head>
 <meta charset='UTF-8'>
 <title>Simple Loader</title>
 <style>
  /* This only works with JavaScript, 
   if it's not present, don't show loader */
  .no-js #loader { display: none; }
  .js #loader { display: block; position: absolute; left: 100px; top: 0; }
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 <script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
 <script>
  // Wait for window load
  $(window).load(function() {
   // Animate loader off screen
   $("#loader").animate({
    top: -200
   }, 1500);
  });
 </script> 
</head>
<body>
 <img src="download.png" id="loader">
 <img src="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
jquery实现不包含当前项的选择器实例
Jun 25 #Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 #Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 #Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 #Javascript
javascript实现跨域的方法汇总
Jun 25 #Javascript
浅谈JavaScript字符串拼接
Jun 25 #Javascript
javascript最基本的函数汇总
Jun 25 #Javascript
You might like
php date()日期时间函数详解
2010/05/16 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
如何在django中添加日志功能
2020/02/06 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
黄河象教学反思
2014/02/10 职场文书
对教师的评语
2014/04/28 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
教师师德表现自我评价
2015/03/05 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
单位考核鉴定意见
2015/06/05 职场文书
网吧管理制度范本
2015/08/05 职场文书
患者身份识别制度
2015/08/06 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL