javascript - 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

我有更多测试，但堆栈溢出限制我只能使用两个链接。这是平底锅处理程序 函数 boardPanHandler2(事件){ 变种新左； 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;
}

并在拖动和释放时添加和删除它。当我们知道该事件时，我已经更新了您的 fiddle 以使用它来执行此操作

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

并且由于 mouseup(释放)绑定(bind)到窗口，因此在触发时将其全部删除

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

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