Ленивая загрузка и появление изображений

Ленивая загрузка и появление изображений

От автора: Уменьшение времени загрузки изображений на данный момент один из самых быстрых и легких способов повышения производительности сайта. Время загрузки включает в себя много понятий: минификация изображений с помощью инструментов типа ImageOptim и TinyPNG, data URI, спрайты, а также ленивая загрузка изображений.

Такой тип загрузки слегка сбивает с толку, изображения появляются прямо из ниоткуда, и чтобы изображение не появлялось слишком резко, можно применить плавное появление. Я просто обожаю этот эффект. Если не установить разрешение изображения, то во время загрузки страница будет прыгать, и только потом плавно появится изображение. Я видел различные решения этой проблемы (некоторые не самые удачные, как мой прошлый способ), и я решил поделиться с вами моим новым методом.

Ссылку укажите через data-src.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Изображения с атрибутом data-src должны быть невидимыми, плавно уменьшая прозрачность:

Вы уже можете догадаться, что мы будем делать с этим атрибутом во время загрузки изображения атрибут будет удаляться после загрузки изображения

Да, мой метод требует JavaScript, как вы могли заметить. Для старых браузеров добавьте.

Это очень легкий урок, но я видел столько способов его реализации, что решил поделиться своим; способ абсолютно рабочий, проводились тесты даже на изменение истории с помощью AJAX (как у меня на сайте). Конечно, этот способ отличается от настоящего, основанного на прокрутке страницы, но для него требуется всеми любимый плагин JavaScript. Но если вы ищите простых решений, то этот метод подойдет.

ДЕМО

Автор: David Walsh

Источник: http://davidwalsh.name/

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий