Альтернативный метод скрытой загрузки изображений техникой прогрессивного улучшения

Альтернативный метод скрытой загрузки изображений техникой прогрессивного улучшения

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

Курица или яйцо

JavaScript не может гарантировать стопроцентное сокрытие HTML-изображений до их загрузки: если скрипт будет выполнен не вовремя, пользователь может заметить вспышки на экране – изображение загружается и только потом прячется с помощью JS. Если же изображения загружаются исключительно через JS, а скрипты отключены или не сработали, тогда пользователь увидит голую страницу.

Обычно для решения этой проблемы используют комбинацию из старых и новых техник: прозрачный фильтр в формате GIF размером 1х1 px размещается в атрибуте src, а настоящее изображение в data- атрибуте.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Потом JS заменяет старое значение на новое, часто это делается по событию прокрутки:

Однако проблема блокирования JS до сих пор не решена. Для ее решения можно поместить настоящее изображение в тег noscript:

Контент внутри тега noscript отображается только в случае, если JS не поддерживается. Если JS работает, то GIF фильтры заменяются нормальными изображениями, а контент noscript игнорируется. Тем не менее, у данного подхода есть два минуса:

Контент на странице повторяется два раза (первый в атрибуте data-src, второй в теге noscript), что усложняет работу с кодом.

Нет фолбэка на случай если JS поддерживается, но в коде есть ошибки: контент noscript отображаться не будет, а изображения не заменятся на нормальные, т.е. страница останется пустая.

Другой способ

На выходных я придумал другой способ. Он отлично работает с одним допущением, если браузера поддерживает CSS анимацию. Я загружал изображения на страницу, но оставлял их невидимыми, если JS был активен.

Изображения на странице размещаются как обычно: в нашем случае я обернул их в блок DIV с двумя классами; атрибут alt я оставил пустым для упрощения кода:

Изображениям задано свойство opacity 0:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

К изображениям также прицеплена анимация, которая сделает прозрачность равной 1 через 1 секунду: недостаточно, чтобы кто-то заметил, но достаточно, чтобы JS подхватил работу:

Анимацию можно сделать более изощренной, добавив последовательное плавное появление в CSS:

JavaScript

Скрипт находит элементы с классом reveal при помощи querySelector и удаляет их с помощью метода classList. После этого анимация не сработает:

Изображения в ссылках все еще доступны скрипту:

…т.е. изображения загрузятся, но будут скрыты, пока их не покажут с помощью JS. В теории можно не задавать opacity:0 через CSS, а делать изображения невидимыми напрямую из JS:

Данный подход немного рискованный. Для его работы ничто не должно блокировать JavaScript.

Результат

Если JS не поддерживается, или не сработал код, изображения с анимацией плавно появятся через секунду – от JS версии почти не отличается (появление можно сделать последовательным, если добавить CSS). Если JS работает, изображения будут скрыты до тех пор, пока скрипт не изменит их.

Я тестировал демо с помощью инструмента понижения скорости соединения до 2G, код работал отлично. Единственное, что мне не нравится в CSS, это то, как он выбирает время: если хоть что-то помешало выполнению JavaScript, анимация будет запущена сразу же. Тем не менее, веб-страницы, спроектированные по современным стандартам производительности, должны нормально работать. Надеюсь, данный метод был вам полезен.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

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

Комментарии 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