CSS/Javascript 超大图像绝对定位减速

Question

我在 Chrome 中看到一些我正在编写的图像“缩放/平移”代码的奇怪行为。我只在 Chrome 中看到了这个问题，因为其他浏览器似乎没有呈现高质量的调整大小的 .jpg 图像。

我正在使用 javascript 和绝对定位（顶部/左侧）在屏幕上单击并拖动时移动和成像。在我的完整项目中，我有一个占屏幕百分比的容器 div，然后是另一个包含大 img (4200x4200px) 的 div。在 chrome 中，响应非常“缓慢”，具体取决于我对图像的“放大”程度。我写了一些简化的测试来告诉你们我在说什么。

请在全屏模式下以 1920x1080 或更高的分辨率运行示例。这是一些平移代码，其中我的 div 容器小于我的图像 idv（调整为 800x800px）。 Test 1 请注意，如果图像填满了 div 的高度，则平移性能非常差。如果图像的显示部分没有占据 div 的整个高度，则它是相当平滑的。

接下来是相同的代码，唯一的变化是 div 容器设置为比 img div (801px) 多 1 个像素。现在，图像平移总是非常流畅。 Test 2

我有更多测试，但堆栈溢出将我限制为两个链接。这是平底锅处理程序 功能板PanHandler2（事件）{ var newLeft; var newTop;

    if (gBoardMouseDownFlag) {

            newLeft = gBoardPanLeftStart + event.pageX - gBoardPanPageXStart;


            newTop = gBoardPanTopStart + event.pageY - gBoardPanPageYStart;


            $(".div-board").css('left', newLeft).css('top', newTop);
            //$(".div-board").css('transform', 'translate(' + newLeft + 'px, ' + newTop + 'px)');
    }

    $("h1").text($(".div-board").width() + "," + $(".div-board").height() + " " + gBoardContainerX + "," + gBoardContainerY);
}

总的来说，我对 html/css/javascript 还是很陌生，所以请放轻松。任何见解都会很棒！

Answer 1

将-webkit-backface-visibility: hidden; 添加到您的.img-board 以及您需要拖动的任何其他大图像。

.img-board
{
    position:absolute;
    width:100%;
    height:100%;
    -webkit-backface-visibility: hidden;
}

http://jsfiddle.net/WtjT5/34/

关于“在 chrome 中调整大小的图像质量看起来不再那么好”

撤消我提出的第一个建议，添加一个新的 CSS 类

.noantialias{
    -webkit-backface-visibility: hidden;
}

并在拖放时添加和删除它。当我们知道事件时，我已经更新了你的小提琴来使用它来做到这一点

$(event.target).addClass('noantialias');

而且由于 mouseup (release) 绑定到窗口，所以在触发时删除所有内容

$('.noantialias').removeClass('noantialias');

http://jsfiddle.net/WtjT5/41/