>  기사  >  웹 프론트엔드  >  jquery显示loading图片直到网页加载完成的方法_jquery

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

WBOY
WBOY원래의
2016-05-16 15:52:401448검색

本文实例讲述了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程序设计有所帮助。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.