Home > Article > Web Front-end > jquery显示loading图片直到网页加载完成的方法_jquery
jquery显示loading图片直到网页加载完成的方法_jquery
- WBOYOriginal
- 2016-05-16 15:52:401445browse
本文实例讲述了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" alt="jquery显示loading图片直到网页加载完成的方法_jquery" >
<img src="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg" alt="jquery显示loading图片直到网页加载完成的方法_jquery" >
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：arguments对象验证函数的参数是否合法_javascript技巧Next article：jQuery实现为图片添加镜头放大效果的方法_jquery