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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

ДЕМО

Автор: David Walsh

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

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

Получить

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree