1

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

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

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

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

我有更多测试，但堆栈溢出将我限制为两个链接。这是平移处理函数 boardPanHandler2(event) { var newLeft; 变量新顶部；

    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 很陌生，所以对我来说放轻松。任何见解都会很棒！

4

1 回答 1

2

添加-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/

于 2013-10-20T21:58:07.907 回答