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 相关文章推荐
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
一篇文章学会Vue中间件管道
Jun 20 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
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
用Python解决x的n次方问题
2019/02/08 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Python文件路径名的操作方法
2019/10/30 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python3跳出一个循环的实例操作
2020/08/18 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
Java编程面试题
2016/04/04 面试题
毕业生自我推荐
2013/11/04 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
检讨书怎么写
2015/01/23 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js