纹理加载错误(JS动画）

>Intruduction：我正在用JavaScript和PIXI编写一个简单的动画.js。

工作原理：我在新的地方绘制纹理，并在每一步都将其删除在旧地方。

问题：有时我会得到这些结果（某些纹理不显示并且 CPU 负载为 50%）http://itmages.ru/image/view/2649716/a5ae37b5

但是，如果我更新页面，我可以获得正常结果（并非总是如此），并且 CPU 负载为 2-3%http://itmages.ru/image/view/2649736/ca696082

法典

！函数 Animate 执行一个步骤的动画

有 3 个版本：

1）

anim();
    function anim() {
        setTimeout(function() {
            requestAnimationFrame(anim);
            animate();
        }, 40);
    }

2） setInterval(function() {requestAnimationFrame(animate);}, 50);

3） setInterval(animate, 50);

我使用该功能加载图片：

function presets()
{
    unit_texture = new PIXI.Texture.fromImage('/assets/unit_2.png');//('/images/unit_2.png')
    shell_texture = new PIXI.Texture.fromImage('/assets/shell.png'); //('/images/shell.png')
}

unit_2.png约为377字节，分辨率为（19 x 20）
shell.png约为30 KB，分辨率为（200x200）

加载后，我使用这些纹理来制作精灵（PIXI）

function Unit(id, x, y, energy, hp)
{
    this.id = id;
    this.x = x;
    this.y = y;
    this.energy = energy;
    this.hp = hp;
    this.sprite = new PIXI.Sprite(unit_texture);
    this.sprite.width  = 2 * 50;
    this.sprite.height = 2 * 50;
    this.sprite.anchor.x = 0.5;
    this.sprite.anchor.y = 0.5;
    this.sprite.position.x = x;
    this.sprite.position.y = y;
    stage.addChild(this.sprite);
}

在每一步中，我都会删除所有旧的 Unit 对象并创建新的 Unit 对象。
（我不能因为我的系统组织而移动它们）。
我认为这里最大的陷阱是多次制作精灵，但我还无法修复它。