Как решить проблему подгрузки изображений, установленных как background-image?
Здравствуйте.
Есть панель. При наведении на элемент панели подставляется другое изображение. Изображения устанавливаются блоку с помощью background-свойства.
При срабатывании hover видно задержку в смене изображения. Как я понял, можно применить спрайты, а что еще помимо них можно использовать?
Мне кажется лучше всего эти изображения переделать на svg. Еще вариант что если второй вариант изображения не подгружать, а изменять существующее фильтром?
Да, как вариант. На счёт подгрузки изображений. Почему идёт задержка, вы сказали, что изображения подгружаются сразу при открытии сайта, или вы думали, что я использовал спрайт?
wbrapist: И еще я сразу не обратил внимания, ну у вас офигенно здорового разрешения изображения. Такого не должно быть, уменьшите их раз в 5, и желательно еще сожмите их через какой нибудь сервис. Чем меньше будут они весить тем быстрее будет грузиться сайт, а с этими изображениями он будет жутко тормозить на слабых машинах или средней скорости интернет.
Еще можно подставить закодированные в base64 изображения (inline-background) - оба изображения в этом случае подгрузятся одновременно с CSS файлом и задержки не будет. Но изображения должны быть небольшими, т.к. именно на их размер увеличится размер CSS файла.