Пол Хаммонд (Paul Hammond) написал большую статью под названием «Ускорь свой сайт с применением отложенной загрузки контента» (Speed Up Your Site with Delayed Content). В своем материале он изложил технику для погрузки части содержимого, такого как изображения аватаров профилей пользователя в комментариях, после первоначальной загрузки страницы, что дает хороший прирост производительности при загрузке страницы.
Есть и другие ситуации, когда отложенная загрузка контента может быть применена, например в адаптивном веб-дизайне.
Изначально адаптивный веб-дизайн применялся к веб-сайтам, ориентированным на персональные компьютеры, чтобы позволить им адаптироваться для маленьких разрешений экрана. Но сейчас адаптивный веб-дизайн больше применяется для нового подхода именуемого «mobile first».
Ранний подход в разработке сайтов с использованием адаптивного веб-дизайна изначально предполагал разработку большого, многофункционального сайта для персональных компьютеров и устройств с большими экранами, с последующей адаптацией под мобильные устройства. При этом часть функционала сайта (дополнительные меню, вспомогательные панели, расширенные инструменты и т.д.) впоследствии скрывалась от пользователей при помощи медиа запросов (media queries). Пользователь при этом видел только то, что предназначено для отображения на мобильных устройствах. Минус такого подхода в том, что часть контента (и зачастую большая часть) все-равно загружается в браузер пользователя, увеличивая тем самым время загрузки страницы и потребляемый траффик.
Одно из главных преимуществ mobile first подхода в том, что данный подход заставляет вас сконцентрироваться на основном содержании вашей страницы. Возможно такой подход будет даже более правильно назвать «content-first». В таком подходе вы отображаете только суть вашей страницы и отбрасываете в сторону все дополнительные удобства большого, полноразмерного сайта, которые несущественны, либо вносят дополнительный, но необязательный функционал.
Но как вам поступить, когда ваша страница загружается на устройстве, способном ввиду своего достаточного разрешения дисплея отобразить дополнительный функционал сайта? Вы можете загрузить такой дополнительный необязательный функционал при помощи технологии Ajax и приемов, которые Пол Хаммонд описал в своей статье. Разница лишь в том, что вам сначала необходимо запустить быстрый тест, чтобы определить, обладает ли область просмотра устройства, на котором загружается ваша страница достаточной шириной, чтобы вместить дополнительный контент.
Представим такою ситуацию: Я опубликовал статью о кошках и хотел бы включить соответствующие новости о кошках по теме в элементы боковой панели, но только, если на экране есть достаточно места для этой самой боковой панели.
В качестве новостного ресурса будем использовать Google News API. Данный ресурс отлично подходит для того, чтобы использовать отложенную загрузку, ведь мы не хотим, чтобы сторонние сервисы замедляли загрузку нашей страницы. Так что отправим запрос в Google News API после загрузки страницы.
Вот пример функции использующей Ajax для получения новостей.
var searchNews = function(searchterm) {
var elem = document.createElement('script');
elem.src = 'http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q='+searchterm+'&callback=displayNews';
document.getElementsByTagName('head')[0].appendChild(elem);
};
Также я написал callback функцию displayNews, которая принимает JSON от Ajax запроса и добавляет контент в блок с индификатором newsresults.
var displayNews = function(news) {
var html = '',
items = news.responseData.results,
total = items.length;
if (total>0) {
for (var i=0; i<total; i++) {
var item = items[i];
html+= '<article>';
html+= '<a href="'+item.unescapedUrl+'">';
html+= '<h3>'+item.titleNoFormatting+'</h3>';
html+= '</a>';
html+= '<p>';
html+= item.content;
html+= '</p>';
html+= '</article>';
}
document.getElementById('newsresults').innerHTML = html;
}
};
Теперь я могу вызвать функцию добавления новостей внизу моей страницы.
<script>
searchNews('cats');
</script>
Теперь если я хочу получать новости только при определенном доступном разрешении области просмотра броузера, я могу обвернуть функцию блоком if.
<script>
if (document.documentElement.clientWidth > 640) {
searchNews('cats');
}
</script>
Если область просмотра броузера шире чем 640 пикселей, запустится функция получения и добавления новостей в контейнер с индификатором newsresults.
<div id="newsresults">
<!-- search results go here -->
</div>
И теперь, чтобы оставить для пользователей мобильных устройств изменим контейнер, оставив возможность получения новостей самостоятельно:
<div id="newsresults">
<a href="http://www.google.com/search?q=cats&tbm=nws">Search Google News</a>
</div>
Итак, посетители с маленькими экранами увидят ссылку на получение новостей, а пользователи с большими экранами увидят непосредственно список новостей.
До этого я концентрировался при разработке веб-страниц исключительно на технологиях, таких как HTML и JavaScript, но подход представленный выше позволяет сконцентрироваться на стратегии подачи контента и структуре информации. С вводом отложенной загрузки, контент может не только «отображаться» и «быть скрытым» но и «быть загруженным» при определенных условиях.
Это был просто пример, но я надеюсь, что он иллюстрирует, что отложенная загрузка может стать важной частью адаптивного веб-дизайна.
Данная статья является вольным переводом статьи Conditional Loading for Responsive Designs за авторством Jeremy Keith
