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验证元素是否为空的两种常用方法
Mar 17 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
javascript正则表达式总结
Feb 29 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
vue完美实现el-table列宽自适应
May 08 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下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
python中base64加密解密方法实例分析
2015/05/16 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python opencv实现运动检测
2018/07/10 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python字符串反转的四种方法详解
2019/12/02 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
《猴子种树》教学反思
2014/02/14 职场文书
城管综合整治方案
2014/05/01 职场文书
民生工作实施方案
2014/05/31 职场文书
出国签证在职证明
2014/09/20 职场文书
高一化学教学反思
2016/02/22 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
详解MindSpore自定义模型损失函数
2021/06/30 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
在Python 中将类对象序列化为JSON
2022/04/06 Python