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 相关文章推荐
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
jquery自定义表格样式
Nov 23 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
总结Python中逻辑运算符的使用
2015/05/13 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
python逆向入门教程
2018/01/15 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
开发房地产协议书
2014/09/14 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server