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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
vue-router单页面路由
Jun 17 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 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的access操作类
2008/04/09 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
js实现蒙版效果
2020/01/11 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python中super函数的用法
2017/11/17 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
python算的上脚本语言吗
2020/06/22 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
《争吵》教学反思
2014/02/15 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
学校通报表扬范文
2015/05/04 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL