Изменение изображения вызывает большое отставание

Question

У меня проблема в том, что после нажатия на миниатюру (мини-изображение, которое вызывает изменение фона на холсте), страница будет отставать, и если вы все больше и больше нажимаете на другие миниатюры, лаги очень большие, и другой эффект заключается в том, что текст не появляется после изменения image(это связано с этими лагами, думаю, еще раз) Может кто-нибудь сказать мне, где проблема, или просто посмотреть на мой код и попытаться исправить его?

спасибо, так что мой, потому что я действительно не знаю, где проблема:(

http://codepen.io/anon/pen/ydxIH

Answer 1

http://codepen.io/anon/pen/bsdHp

главная ошибка здесь заключалась в том, что вы делали:

    layer.add(yoda);
    layer.add(vrchnyText);
    layer.add(spodnyText);
    stage.add(layer); 

на каждый клик картинки.

Это замедлило все, потому что вы не "меняли" картинку и текст, вы "добавляли" их каждый раз. Итак, вы хотите изменить рисунок и текст, а не добавлять его каждый раз, а затем просто нарисовать слой снова.

    vrchnyText.setText($(this).val().toUpperCase());
    layer.draw();

Кроме того, вам не нужно каждый раз менять ширину и высоту сцены и изображения, так как оно всегда равно 500, это ДЕЙСТВИТЕЛЬНО замедляет его.