对于我正在编写的一些图像“缩放/平移”代码,我在 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 很陌生,所以对我来说放轻松。任何见解都会很棒!