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知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
vue实现简单计算商品价格
Sep 14 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/11/23 PHP
深入PHP变量存储的详解
2013/06/13 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
PHP递归算法的简单实例
2019/02/28 PHP
jquery获取下拉框中的循环值
2017/02/08 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
python 类详解及简单实例
2017/03/24 Python
Python AES加密模块用法分析
2017/05/22 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
python如何实现内容写在图片上
2018/03/23 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Python更新所有已安装包的操作
2020/02/13 Python
基于Python的OCR实现示例
2020/04/03 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
大学生旅游业创业计划书
2014/01/29 职场文书
2014信息公开实施方案
2014/02/22 职场文书
大学生社会实践方案
2014/05/11 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
医学生求职自荐书
2014/06/12 职场文书
2015年中个人总结范文
2015/03/10 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle