CSS:


  1. .newsloader-bg {
  2. display: none;
  3. position: absolute;
  4. width: 100%;
  5. height: 100%;
  6. top: 0px;
  7. left: 0px;
  8. background: #eee;
  9. z-index: 1;
  10. }
  11. .newsloader {
  12. display: none;
  13. position: absolute;
  14. top: 50%;
  15. left: 50%;
  16. width: 200px;
  17. height: 200px;
  18. margin-top: -100px;
  19. margin-left: -100px;
  20. text-align: center;
  21. color: #999;
  22. z-index: 2;
  23. }
  24. .jpnews-jp, .usanews-en {
  25. background-color: #FFFFFF;
  26. border-radius: 10px;
  27. text-align: center;
  28. vertical-align: middle;
  29. -webkit-box-shadow: 0px 0px 6px 0px #333;
  30. box-shadow: 0px 0px 6px 0px #333;
  31. width: 780px;
  32. height: 700px;
  33. position:relative;
  34. }
  35. .jpnews-jp .close-x, .usanews-en .close-{
  36. text-align: right;
  37. height: 35px;
  38. padding-top: 15px;
  39. padding-right: 15px;
  40. z-index: 3;
  41. position:relative;
  42. }


    HTML:


  1. <div class="jpnews-jp">
  2. <div class="newsloader-bg">
  3.   <div class="newsloader">
  4.     <img src="http://imgout.ph.126.net/47161134/loading.jpg" height="40" alt="Now Loading..." />
  5.     <p>努力获取中...</p>
  6.   </div>
  7. </div>
  8. <div class="wrap">
  9. <div style="width:780px;height:630px;">
  10. 需要显示的正文内容
  11. </div>
  12. </div>
  13. </div>



    JS脚本:

  1. <script>
  2. $(function() {
  3.   $('.newsloader-bg ,.newsloader').css('display','block');
  4. });
  5.  
  6. $(window).load(function () { //全部加载完后执行
  7.   $('.newsloader-bg').delay(900).fadeOut(800);
  8.   $('.newsloader').delay(600).fadeOut(300);
  9.   $('.wrap').css('display', 'block');
  10. });
  11.  
  12. //经过一定时间后如果还未加载完则强制显示内容
  13. $(function(){
  14.   setTimeout('stopload()',240000);/*设置时间*/
  15. });
  16.  
  17. function stopload(){
  18.   $('.wrap').css('display','block');
  19.   $('.newsloader-bg').delay(900).fadeOut(800);
  20.   $('.newsloader').delay(600).fadeOut(300);
  21. }
  22. </script>