Не вдаваясь в подробности реализации, хочу поделиться парой идей, лежащих в основе вращения автомобиля на сайте ZAZ Sens.
1. Для каждого цвета все восемь ракурсов автомобиля собраны в одном файле JPG. Вот, например, файл для цвета «Зеленый мох»:
Почему я решил объединить все ракурсы в один общий файл? Во-первых, размер общего файла получается меньше. Во-вторых, меньше обращений на сервер. И, наконец, JavaScript-код для прелоада и управления одним файлом проще, чем для прелоада и управления восемью.
Эта картинка стоит бэкграундом у дивчика размером с один ракурс автомобиля. При вращении меняется background-position у дивчика и показывается соответствующий ракурс:
2. Очевидно, что прежде чем давать пользователю вращать автомобиль определенного цвета, нужно дождаться полной загрузки файла, иначе во время вращения будут неприятные эффекты в виде обрезанного автомобиля или пустоты на месте недогруженных ракурсов.
Поэтому изначально все цвета задизейблены, а в JavaScript я ставлю картинки с собранными ракурсами на загрузку (для всех цветов). По событию onload соответствующий цвет энейблится (код упрощен для наглядности):
var oImage = document.createElement('img');
oImage.onload = function(){ /* включаем зеленый цвет */ });
oImage.src = '/f/1/car-sea-green.jpg';
Таким образом цвета включаются по мере загрузки цветовых файлов.
Моей ошибкой стало то, что я ставлю на загрузку все цветовые файлы сразу, в результате чего они грузятся браузером параллельно. Получилось, что браузер долго грузит, потом почти одновременно включаются все цвета.
Если бы я сделал последовательную загрузку, то есть чтобы следующий цветовой файл начинал загружаться только по завершению загрузки предыдущего, для пользователя это было бы лучше — он быстро бы получил возможность вращать один цвет, а пока он его вращает, догрузились бы остальные. К сожалению, руки так и не дошли переделать.
