Как отобразить анимированное изображение во время загрузки страницы с помощью jQuery - PullRequest
Новая
       44

Как отобразить анимированное изображение во время загрузки страницы с помощью jQuery

0 голосов
/ 19 июля 2010

У меня есть страница ASP.NET, загрузка которой занимает много времени из-за загрузки нескольких пользовательских элементов управления. Есть ли способ показать анимацию загрузки с помощью jQuery во время загрузки страницы?

Спасибо.

Ответы [ 4 ]

1 голос
/ 19 июля 2010

просто вставьте div в качестве абсолютной позиции и стилизуйте его так, как вы хотите, когда страница загружена, скрывайте ее. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jq.js"></script>
<style>
.boxMid{position:absolute; top:30%; left:40%; width:200px; height:200px; background-color:#fff;
               border:1px solid #333; display:block;}
#mybox{position:absolute; left:0; top:0; width:100%; height:100%; background-color:#666666; opacity:.8; display:block;filter:alpha(opacity=80);}
</style>
</head>

<body>

<div id="mybox" >
    <div class="boxMid">
     Loading, please wait ...
    </div>
</div>
    <div id="loading">loading</div>

    <script type="text/javascript">
    $(document).load(function(){
        $('#mybox').fadeOut();
    });

    </script>

</body>
</html>
0 голосов
/ 19 июля 2010 
   $.ajaxSetup({   
      beforeSend:function(){   
         $("#loading").show();   
      },   
      complete:function(){   
         $("#loading").hide();   
   });

Это изменит ваши глобальные настройки ajax, чтобы показывать / скрывать #loading объект во время обработки ajax.

0 голосов
/ 19 июля 2010

Для этого я использую плагин BlockUI для jQuery.

0 голосов
/ 19 июля 2010

Вам не нужен jQuery.

Вы можете просто добавить тег <img>, отображающий анимированный GIF.
Вы можете найти подходящий анимированный GIF на AJAXLoad.info .

...