1

我正在做一些音乐可视化实验，它根据所选的可视化从 canvas 或 svg 上的 dancer.js 中提取数据。我有 4 个选项：在画布上清除 js，在两个 svg 上使用 raphaeljs，在最后一个中使用三个.js。

为了保留声音元素并防止重新加载 dancer.js，我以以下方式加载不同的脚本：

            $('body > a').click(function(){
                $('canvas').remove();
                $('svg').empty();
                $('svg').remove();
                var id = $(this).attr('id');
                audioElement = $('#audio')[0];
                $.ajax({
                    type: "GET",
                    url: "js/"+id+"-ajax.js",
                    dataType: "script"
                });
            });

如果有任何不同的可视化被 ajax 捕获，它应该只删除画布和 svg

  init = function() {
    ...
  }
  init();

它们共享相同的功能，例如onKick在 init 中分别更改为加载的脚本。（onKick 是为了让 dancer.js 在正在播放的歌曲中“踢”时触发它）。

在您开始在它们之间切换之前，它的效果非常好。在画布和画布之间切换几乎没有区别，但是当我从画布更改为 svg 时，而不是回到画布，帧率急剧下降。

可能是因为 svg 被保存在内存中或其他一些建议？

4

0 回答 0