image-downloads

JavaScript — Повышаем скорость загрузки страницы при помощи отложенной загрузки изображений

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

Одной из главных причин медленной загрузки, это изображения. Для того что б облегчить страдания браузера воспользуемся не хитрым (но очень клевым) способом от Patrick’a Sexton’a.

Вставим место всем знакомого <img src=»ссылка на картинку»> данный тег:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

где your-image-here является ссылкой на изображение.

Далее добавим перед закрывающим body (</body>) данный скрипт:

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

В следствии чего загрузка изображений будет происходить после загрузки страницы.

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

ПС. Еще очень хороший пример применения отложенной загрузки Вы можете посмотреть в данном решении.