В этой статье описывается простой способ отложить загрузку изображений без использования JQuery, максимального повышения скорости загрузки страницы. Теперь для Вас не будет являться секретом как разобраться с тяжелыми изображениями, на которые так жестоко ругается гугл при тесте скорости страницы.
Одной из главных причин медленной загрузки, это изображения. Для того что б облегчить страдания браузера воспользуемся не хитрым (но очень клевым) способом от Patrick’a Sexton’a.
Вставим место всем знакомого <img src=”ссылка на картинку”> данный тег:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
1
<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>
1
2
3
4
5
6
7
8
9
<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>
В следствии чего загрузка изображений будет происходить после загрузки страницы.
В данном примере мы указали место тега с ссылкой на изображение в привычном виде, тег “фальшивку”, но после того как страница будет полностью загружена скрипт заменит фальшивку на реальную ссылку изображения.
ПС. Еще очень хороший пример применения отложенной загрузки Вы можете посмотреть в данном решении.