В этой статье описывается простой способ отложить загрузку изображений без использования 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>
В следствии чего загрузка изображений будет происходить после загрузки страницы.
В данном примере мы указали место тега с ссылкой на изображение в привычном виде, тег «фальшивку», но после того как страница будет полностью загружена скрипт заменит фальшивку на реальную ссылку изображения.
Источник записи: https://mediadoma.com