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冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
Vue父子组件传值的一些坑
Sep 16 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
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程序员的技术瓶颈分析
2011/07/17 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
浅谈php自定义错误日志
2015/02/13 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python切片知识解析
2016/03/06 Python
python执行使用shell命令方法分享
2017/11/08 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
文秘自荐信
2014/06/28 职场文书
经典演讲稿开场白
2014/08/25 职场文书
学校运动会广播稿
2014/10/11 职场文书
离职信范文
2015/06/23 职场文书
导游带团欢迎词
2015/09/30 职场文书
2016教师国培研修感言
2015/12/08 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python