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 相关文章推荐
javascript 学习笔记(onchange等)
Nov 14 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
js计算精度问题小结
Apr 22 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
vue监听用户输入和点击功能
Sep 27 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
一次编写,随处运行
2006/10/09 PHP
深入分析php之面向对象
2013/05/15 PHP
php多文件上传实现代码
2014/02/20 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
js静态作用域的功能。
2006/12/25 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
社会学专业学生职业规划书
2014/02/07 职场文书
军训自我鉴定200字
2014/02/13 职场文书
预备党员的自我评价
2014/03/12 职场文书
2014最新实习证明模板
2014/10/02 职场文书
立春观后感
2015/06/18 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript