jquery显示loading图片直到网页加载完成的方法

 　　本文实例讲述了jquery显示loading图片直到网页加载完成的方法。分享给大家供大家参考。具体实现方法如下：

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!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="5400751421_55d49b2786_o.jpg">
</body>
</html>

　　希望本文所述对大家的jquery程序设计有所帮助。

时间： 2024-02-27 22:38:19

jquery显示loading图片直到网页加载完成的方法的相关文章

jquery显示loading图片直到网页加载完成的方法_jquery

本文实例讲述了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'

jquery插件NProgress.js制作网页加载进度条

  这篇文章主要介绍了jquery插件NProgress.js制作网页加载进度条的相关资料,需要的朋友可以参考下 NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Googl

jQuery实现页面滚动时动态加载内容的方法

 这篇文章主要介绍了jQuery实现页面滚动时动态加载内容的方法,实例分析了jQuery实现动态加载页面的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery实现页面滚动时动态加载内容的方法.分享给大家供大家参考.具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

jQuery实现页面滚动时动态加载内容的方法_jquery

本文实例讲述了jQuery实现页面滚动时动态加载内容的方法.分享给大家供大家参考.具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到. var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).hei

浅析用Base64编码的图片优化网页加载速度

  想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片.如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度.所以现在有一种做法是将多张图片合并到一起,这样在打开页面的时候只需要一次http请求就可以加载多张图片,然后通过设置图片的背景偏移量来正确的显示.现在我们可以将图片转成base64编码,然后直接写在html页面或者css里面,这样在加载页面或者css的时候就可以直接将图片加载过去,这样也省去了设置图片背景偏移

JavaScript判断图片是否已经加载完毕的方法汇总_javascript技巧

在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示: 一.onload事件 通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

网页加载缓慢怎么办?网页加载缓慢解决方法

方法一,利用工具修改(推荐使用360) 1.在电脑中我们打开360安全软件,然后在打开的软件界面我们点击"电脑助手"如下图所示. 2.现在我们进入到了电脑援助界面我们在搜索框输入"网页加载缓慢"再点击搜索,如下图所示. 3.在搜索结果页面会有我们问题相关的解决方案了,我们点击"立即修复"即可解决了. 方法二, 整理磁盘碎片法 1.在桌面电脑我的电脑进入,然后右击要清理的盘,在弹出菜单点击"属性--磁盘清理"点击进入,如图所示.

Android 自定义标题栏 显示网页加载进度的方法实例_Android

这阵子在做Lephone的适配,测试组提交一个bug:标题栏的文字较长时没有显示完全,其实这并不能算个bug,并且这个问题在以前其他机器也没有出现,只是说在Lephone的这个平台上显示得不怎么美观,因为联想将原生的标题栏UI进行了修改.修改的过程中遇到了一个难题,系统自带的那个标题栏进度总能够到达100%后渐退,但是我每次最后到100%那一段显示不全,尝试了用线程程序死了卡主了不说,还是一样的效果,后来同事一句话提醒了我用动画.确实是这样我猜系统的也是这样实现的,等进度到达100%后,用动画改

Android 自定义标题栏 显示网页加载进度的方法实例

这阵子在做Lephone的适配,测试组提交一个bug:标题栏的文字较长时没有显示完全,其实这并不能算个bug,并且这个问题在以前其他机器也没有出现,只是说在Lephone的这个平台上显示得不怎么美观,因为联想将原生的标题栏UI进行了修改.修改的过程中遇到了一个难题,系统自带的那个标题栏进度总能够到达100%后渐退,但是我每次最后到100%那一段显示不全,尝试了用线程程序死了卡主了不说,还是一样的效果,后来同事一句话提醒了我用动画.确实是这样我猜系统的也是这样实现的,等进度到达100%后,用动画改