Почему JS медленно меняет img.src?

Question

[Игорь]

var currentRock= document.querySelector('.rokcs:nth-child(1)');
        
        
        currentRock.style.cssText="background: url('img/rock/two_brown_rocks_Sprite.svg');\
background-position:-"+countingDestructiom+"px 0px;\
background-repeat: no-repeat;   background-size: 399%;\
display: block; \
height: 89px;     left: 343px;    width: 200px;    top: -81px;\
position: absolute;";
        currentRock.src="";

Очень медленно подменивает картинку...
Лаг очень заметен,да и какие то на бордере серые линии пунктирные...

как можно улучшить?
Чувствуются лаг в 500мс ,плавности нет....
Нажмите S 3 раза для стрельбы
isc.96.lt/t/gam/mar
Спасибо.

Comments

[daniilorain]

Вы уверены, что с вашими знаниями стоит сейчас писать игру? И тем более вы так и собираетесь писать всю "свою" игру при помощи здешнего сообщества? Это премного непрофессионально.

[Игорь]

daniilorain: возникла проблема,я ищу пути решения.Эта игра лишь тест знаний,не более.И да я собираюсь здесь и дальше вопросы задавать,для этого и был создан сервис.

[OVK2015]

Игорь: Как вариант: переведите картинку в base64 и храните в самом js

Answer 1

[Evhen]

Рекомендую поразбираться с такой штукой как спрайты. Это одна большая картинка на которой отображены сразу все элементы в разных их состояниях. Браузер грузит только её, а не кучу картинок. Если вам нужно отобразить какой то элемент, вы просто смещаете картинку в нужном направление относительно области, где вы хотите отобразить этот элемент. В общем в различных анимированных менюшках на сайте, спрайты помогают избавится от лага.

Не знаю, понятно ли объяснил...

Comments

[Игорь]

я так и делаю

Answer 2

[yeti357]

Скорее всего лаг связан с тем, что браузер загружает картинку, после смены src, он ведь ничего о ней не знает, до появления пути к картинке. Выше верный выход подсказали со спрайтом.
Ну и посмотрите в сторону canvas. Всё же использовать дом для игр ресурсоёмко.