5

我正在开发一个基于 jQuery 的音乐播放器，它在主要部分中有很长的项目列表（无序列表，每个 <li> 中都有 <div> 元素，用于获取有关艺术家、专辑和标题的信息）。

您可以在此处访问它的临时公开版本：http: //music.sixteennet.co.uk/ ?anonymous

（所有歌曲都是公开版的无用链接，所以不要费心播放任何东西：P）

首先，快速描述一下这个东西到底是什么：

左侧是一个侧边栏，显示即将播放的歌曲列表。用户在搜索/单击艺术家后选择主列表中的歌曲（单击，shift-click，ctrl-click，你知道的），并通过点击或拖放将它们添加到左侧的播放列表中。我已经完成了所有这些工作（这个问题与如何构建 Javascript 用户界面无关）。

问题：$(window).mousemove()、.mouseup() 和 .mousedown() 包含将框带入视图的函数，其高度以像素为单位（16 * 主列表中选定歌曲的数量）[每个 <li > 高 16 像素]。当鼠标移动时，此框随之移动，直到鼠标悬停在播放列表上时，播放列表会改变颜色，如果用户决定使用 mouseup()（取消单击），则将所选歌曲添加到播放列表中。

唯一的问题是，当鼠标在当前可见的选定歌曲框的情况下移动时，在 Google Chrome中，框的移动非常缓慢，但只有当鼠标位于主歌曲列表上时（但是，CPU 使用率在整个显示框的时间）。在 Firefox 6 和 IE 9 中，整个移动是平滑的，CPU 使用率不是 100%（即使在 Athlon 64 3500+ 上）。（我）在两台 PC 上重复了这个测试，一台运行 Windows 7，另一台运行 Ubuntu Linux。

我非常怀疑这是谷歌浏览器的一个错误，但如果有人愿意通过源代码并告诉我问题是什么（如果有的话）......你就是我的上帝:)

编辑：我说 Chrome/V8 的原因是因为 Safari，使用相同的渲染引擎（WebKit）没有这个问题（虽然它不如 Firefox/IE9/Opera 流畅）

4

2 回答 2

4

我将回答我自己的问题，因为我找到了解决方案：

在盒子上运行这个 jQuery 函数修复了滞后问题：

$.fn.disableSelection = function() {
  return this.each(function() {
    $(this).attr('unselectable', 'on')
    .css({
      '-moz-user-select':'none',
      '-webkit-user-select':'none',
      'user-select':'none',
      '::selection':'none',
    })
    .each(function() {
      this.onselectstart = function() { return false; };
    });
  });
};
于 2011-10-25T13:34:46.303 回答
1

我发现我的电脑没有延迟...

无论如何，也许您可​​以尝试使用诸如下划线的节流功能之类的方法来降低调用事件处理程序的频率

于 2011-10-24T23:56:41.360 回答