Как ускорить страницу при помощи фоновой загрузки изображений?

Спецификация W3C в числе прочих новинок вводит элемент шаблона <template>. Он позволяет загружать графику, скрипты, видео "в теневом" формате. То-есть элементы шаблона не будут воспроизводиться до активации. В результате использования шаблонов разработка сайтов становится удобнее, а функциональность страниц повышается. В частности, шаблон <template> можно использовать для "теневой" загрузки изображений, ускоряющей вывод страницы с иллюстрациями.

1. Загрузка изображений при помощи <template>

Шаблон может быть элементом таблицы, или в нашем случае, списка. Явным образом загружаются пять изображений, а остальные через <template>.

<ul class="cardlist">
  <li class="card current"><img src="images/a-push-please.jpg" alt=""></li>
  <li class="card"><img src="images/amazing-dog.jpg" alt=""></li>
  <li class="card"><img src="images/awesome-mix-dog.jpg" alt=""></li>
  <li class="card"><img src="images/baby-amardillo.jpg" alt=""></li>
  <li class="card"><img src="images/baby-hippo-nom.jpg" alt=""></li>
  <template>
    <li class="card"><img src="images/baby-rhino.jpg" alt=""></li>
    <li class="card"><img src="images/barbie-frenchie.jpg" alt=""></li>
    <li class="card"><img src="images/basset-helmet.jpg" alt=""></li>
    <li class="card"><img src="images/bear-dog.jpg" alt=""></li>
    <li class="card"><img src="images/bear-puppy-fluff.jpg" alt=""></li>
    <li class="card"><img src="images/best-day-ever-puppy.jpg" alt=""></li>
    <li class="card"><img src="images/bleh-puppy.jpg" alt=""></li>
    <li class="card"><img src="images/bleh-tapir.jpg" alt=""></li>
    <li class="card"><img src="images/cat-on-stairs.jpg" alt=""></li>
    <li class="card"><img src="images/chocolate-puppy.jpg" alt=""></li>
    <li class="card"><img src="images/corgisquee.jpg" alt=""></li>
    <li class="card"><img src="images/corns-and-penny.jpg" alt=""></li>
    <li class="card"><img src="images/crazy-otter.jpg" alt=""></li>
    <li class="card"><img src="images/cute-brown-puppy.jpg" alt=""></li>
    <li class="card"><img src="images/dalmatian.jpg" alt=""></li>
    <li class="card"><img src="images/derpy-hedgehog.jpg" alt=""></li>
  </template>
</ul>

2. Вызываем изображение при помощи обработчика

Обработчик загрузок помещает изображения из <template> в родительский элемент

window.addEventListener('load', function(ev) {<br>
// проверьте, поддерживается ли шаблон<br>
if ('content' in document.createElement('template')) {<br>
// получите шаблон<br>
var t = document.querySelector('template');<br>
// получите его родительский элемент<br>
var list = t.parentNode;<br>
// кэшируйте контент шаблона<br>
var contents = t.innerHTML;<br>
// удалите шаблон<br>
list.removeChild(t);<br>
// добавьте кэшированный контент в родительский элемент<br>
list.innerHTML += contents;<br>
}<br>
all = document.body.querySelectorAll('.card').length + 1;<br>
});

Использование "теневой" загрузки изображений позволяет сократить время загрузки страницы на стороне посетителя с 6 до 2 секунд, то-есть в 3 раза!

Назад в раздел