Как я могу использовать прогрессивные методы улучшения для постепенной загрузки медленной страницы? - PullRequest
Новая
       2

Как я могу использовать прогрессивные методы улучшения для постепенной загрузки медленной страницы?

7 голосов
/ 17 августа 2011

У меня есть страница портала в ASP.NET MVC с несколькими различными разделами (частичными представлениями), некоторые из которых неизбежно будут медленными при первом обращении к ним пользователя, потому что они должны вытягивать до данные о дате из внешнего интернет-источника.

Некоторые этих данных могут быть загружены практически сразу, но старый дизайн "Web 1.0" просто переходит на страницу "загрузки", пока все данных не будут доступны. Я пытаюсь улучшить взаимодействие с пользователем, немедленно отображая данные local , а затем использую пару обновлений ajax для отображения удаленных данных через несколько секунд.

Конечно, я хочу сделать это, используя прогрессивное улучшение в случае, если Javascript ломается, блокируется или не поддерживается по какой-либо причине. Моей первой мыслью было использовать метаобновление и отключить его с помощью javascript, но очевидно, что это невозможно . Я также яростно против идеи перенаправления window.location, потому что (а) он очень восприимчив, в отличие от перенаправления сервера, и (б) он вполне в пределах возможного для перенаправления JS работать, но Ajax все еще ломается (например, IE6, плохое поведение мобильных устройств и т. д.)

Есть ли способ, как я могу создать страницу, которая загружается поэтапно, но все еще работает с простым HTML?

Ответы [ 4 ]

2 голосов
/ 25 августа 2011

В прошлом я решил эту проблему с помощью нескольких подходов: один из них - создание отдельных страниц для медленного контента, чтобы пользователи, которые по какой-либо причине не имеют или не получают JS, могли щелкнуть ссылку наполучить содержание.Опыт другой, но работает.

Еще один способ сделать это - показать ссылку в отложенных областях.JS удаляет ссылку и вставляет содержимое.Если пользователь хочет увидеть контент, он щелкает ссылку, вызывая обновление, которое не будет задерживать контент.

1 голос
/ 24 августа 2011

Как указывает Али в своем комментарии, использование фреймов для медленной загрузки контента похоже на путь.

Если ваши подпрограммы ajax делают больше, чем просто загружают контент (например, если вы переформатируете данные каким-то образом), вы можете пойти еще дальше и использовать javascript для удаления iframe при загрузке, затем используйте обычные подпрограммы ajax для загружайте контент как хотите.

Таким образом, пользователи с отключенным javascript по-прежнему видят контент, но ваш локальный контент загружается быстро, в то время как пользователи с включенным javascript получат хороший опыт работы с ajax.

Чтобы удалить iframe с помощью jquery, вы можете сделать что-то вроде этого: 

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  <head>
  <body>
    <div>Fast Loading Content...</div>

    <iframe id="slowContent" src="http://example.com/slowLoadingContent.htm"></iframe>

    <script type="text/javascript">
      $('#slowContent').remove();   // removes both the iframe and any bound events

      // execute your ajax routines to pull in the slowLoadingContent and modify as appropriate
    </script>
  </body>
</html>
0 голосов
/ 26 августа 2011

Если вы абсолютно должны отобразить страницу "все или ничего", вы можете иметь сообщение / ссылку "перезагрузить эту страницу через минуту".

В противном случае "кадры" (использование) или отдельные страницы - довольно хороший план.

0 голосов
/ 18 августа 2011

Полагаю, это зависит от характера данных, которые вы извлекаете, но в этом случае «прогрессивным улучшением» может быть обслуживание страницы без внешнего контента для клиентов, у которых нет javascript доступен, затем вытягивает и вставляет контент, используя javascript, где вы можете. Лично я был бы обеспокоен (слегка) делом «нет доступного JavaScript», но не касался дела «разрывы JavaScript», потому что обработка ошибок в вашем JavaScript может позаботиться о сценарии «ajax не работал должным образом».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...