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 学习6 操纵元素显示效果的函数
Feb 07 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
浅谈Vue.js
Mar 02 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
jquery实现点击左右按钮切换图片
Jan 27 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 empty函数 使用说明
2009/08/10 PHP
php 发送带附件邮件示例
2014/01/23 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PDO::inTransaction讲解
2019/01/28 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
python3.5使用tkinter制作记事本
2016/06/20 Python
python 网络编程常用代码段
2016/08/28 Python
python+django快速实现文件上传
2016/10/24 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
分析python请求数据
2018/08/19 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
会计求职自荐信
2014/06/20 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
Python实现滑雪小游戏
2021/09/25 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android