Нужна рекомендация для загрузчика страниц (HTML-контент) - PullRequest
Новая
       22

Нужна рекомендация для загрузчика страниц (HTML-контент)

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

Клиент запросил загрузчик страниц, что-то «привлекательное», чтобы посетитель знал, что контент уже в пути. Это для стандартного содержимого HTML - текст, изображения и т. Д.

Я видел несколько в Интернете, но многие из них устарели и довольно неуклюжи. Я ищу что-то, что не является проблемой для реализации, но все еще выглядит прилично.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 01 сентября 2013

Если вы хотите создать привлекательный загрузчик, то вам нужно пройти через симпатичное анимированное изображение. Но я предлагаю вам использовать комбинацию анимированного изображения и jQuery, потому что в jQuery доступно много анимации. Вы можете проверить следующую ссылку для более подробной информации, API-интерфейс jQuery Как добавить загрузчик

Ваш HTML, как - 

<div class="loader"></div>

Ваш CSS как 

.loader {
    position: absolute;
   margin: 0 auto;
   z-index: 9999;
   background: url('icon-loader.gif') no-repeat;
   top: 50 px;
  cursor: wait;
}

Ваш код JavaScript, как - 

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
     $(window).load(function(){
        $('div.loading').fadeOut(1000);
    });
</script>
0 голосов
/ 18 марта 2010

Нетрудно построить свой собственный. У вас может быть страница, которая показывает анимированный GIF, а затем загружает страницу с помощью AJAX. Вы можете получить отличные GIF-файлы для загрузки, просто найдя что-то вроде «AJAX loading image». Это может показаться вам легким, а может и не казаться легким, но для меня это не слишком сложно, если вы использовали jQuery и PHP.

Пример Допустим, у вас есть два файла: test1.htm и test2.htm. Вы хотите показать содержимое test2 (для загрузки которого требуется немного времени) на test1 (в котором должны быть части страницы, которые загружаются быстро). Вот два файла, которые я сделал (для этого используется jQuery):

test1.htm 

 <head>
    <script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.get('test2.htm', function(data) {
                $('#Content').html(data);
            });
        });    
    </script>
</head>
<body>
    <div id="Content" >
        <img src="ajax-loader-image.gif" />
    </div>
</body>
</html>

Test2.htm 

<h2>Dynamically Loaded Content</h2>
<p>Hello World!</p>

Так что это должно работать для того, что вы планируете делать. Важно то, что вы пытаетесь разделить страницу на части, которые загружаются быстро, и части, которые загружаются медленно.

...