Показать панель загрузки или анимированный GIF во время загрузки файлов CSS и JS? - PullRequest
1 голос
/ 01 марта 2010

Я видел этот вопрос, задаваемый по частям (просто JS или просто CSS) на других сайтах и ​​ТАК, но я пока не видел хорошего надежного способа сделать это.

Моя ситуация довольно распространенная. Я использую .NET MVC и разрабатываю в Visual Studio. У меня есть страница Site.Master и несколько представлений, каждое из которых содержит заполнитель содержимого, в котором я указываю свои файлы JS и CSS, например:

<asp:Content ID="headerContent" ContentPlaceHolderID="HeaderContent" runat="server">
    <link href="../../CSS/example.css" rel="stylesheet" type="text/css" />
    <script src="../../JS/jquery/jQueryFile.js" type="text/javascript"></script>
    <!-- More files here -->
</asp:Content>

А моя панель навигации представляет собой изображение спрайта, похожее на то, что можно увидеть на сайте Apple . У меня есть разделы сайта с заголовками, также похожими на Apple, которые являются изображениями. Таким образом, мой сайт не очень насыщен изображениями, но особенно когда я смотрю в IE (но также и в некоторой степени Firefox), сайт как бы объединяет себя на моих глазах, загружая изображения и файлы jQuery для плагинов плагин datatables всегда занимает секунду, чтобы примениться к моим таблицам).

Я бы предпочел не показывать страницу, пока все изображения, CSS и JS файлы не загрузятся. Достаточно хорошего индикатора выполнения или даже анимированного GIF-файла, чтобы показать его перед тем, как я покажу им окончательно загруженный сайт. Я думаю, что панель загрузки Gmail использует ту же идею.

Есть ли какие-либо предложения о том, как лучше всего этого добиться? Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 01 марта 2010

Я еще не пробовал, осторожно попробуй. Внутри $ (document) .ready создайте оверлей, отображающий значок загрузки, похожий на анимированный кружок Я предполагаю, что вы назовете это #overlay.

Затем, за пределами $ (document) .ready, попробуйте это

$(window).load(function(){
  $("#overlay").hide();
});

$ (окно) .load означает, что все готово: http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

0 голосов
/ 01 марта 2010
...