时间戳

首页 > 解决方案 > 选项卡更改时图像缩放滞后

javascript - 选项卡更改时图像缩放滞后

问题描述

我一直在研究基于网络的图像查看器。我正在使用 ViewerJs，这个问题不是特定于 viewerjs，而是任何基于 CSS 的图像元素缩放。我已经阻止了浏览器的原生缩放，所以我可以在图像元素上使用键盘快捷键。到目前为止，一切都很顺利。除非我切换到不同的选项卡，然后当我回到它时，它一开始会滞后，然后又变得平滑。

虽然浏览器的原生缩放没有这个问题。只有在放大时它滞后，缩小是平滑的。有什么办法可以避免这种滞后？首先是什么原因造成的？

对于那些想知道为什么我不使用 html5 画布的人。其中一个要求是缩小版本几乎没有锯齿并且不模糊，这仍然是画布正在进行的工作。

编辑：我在这里添加了一个示例：https ://codepen.io/hiratariq/pen/ZEQovza

<link href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.6.1/viewer.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.6.1/viewer.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Viewer.js</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="../css/viewer.css">
</head>
<body>
  <div class="container">
    <h1>Show a viewer dynamically on click a button</h1>
    <button type="button" class="btn btn-primary" id="button">
      Launch the demo
    </button>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.6.1/viewer.min.js"></script>
  <script>
    window.addEventListener('DOMContentLoaded', function () {
      document.getElementById('button').addEventListener('click', function () {
        var image = new Image();

        image.src = 'https://upload.wikimedia.org/wikipedia/commons/d/d2/Saturn_-_High_Resolution%2C_2004.jpg';

        var viewer = new Viewer(image, {
          hidden: function () {
            viewer.destroy();
          },
        });

        // image.click();
        viewer.show();
      });
    });
  </script>
</body>
</html>

只是尝试打开并注意到它没有平滑地放大，但它逐渐变得更平滑，然后尝试更改浏览器选项卡，然后回到 codepen 选项卡并再次放大并注意到它再次不平滑。但是缩小仍然很流畅。

标签： javascripthtmlcssimage-scalingzooming

解决方案

推荐阅读