Вернуться к уроку

Красивый "ALT"

важность: 5

Обычно, до того как изображение загрузится (или при отключенных картинках), посетитель видит пустое место с текстом из «ALT». Но этот атрибут не допускает HTML-форматирования.

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

Реализуйте «красивый» (HTML) аналог alt при помощи CSS/JavaScript, который затем будет заменён картинкой сразу же как только она загрузится. А если загрузка не состоится – то не заменён.

Демо: (нажмите «перезагрузить», чтобы увидеть процесс загрузки и замены)

Картинки для bing специально нет, так что текст остается «как есть».

Исходный документ содержит разметку текста и ссылки на изображения.

Открыть песочницу для задачи.

Подсказка

Текст на странице пусть будет изначально DIV, с классом img-replace и атрибутом data-src для картинки.

Функция replaceImg() должна искать такие DIV и загружать изображение с указанным src. По onload осуществляется замена DIV на картинку.