html - 图像调整大小导致滚动缓慢

Question

我正在加载大图像并让浏览器调整它们的大小。我正在明确设置大小。

<img src="http://example.com/image1.jpg" width="240" height="360"/>

页面上有很多这样的图片。滚动非常缓慢且不稳定。滚动时，chrome 中的事件时间轴看起来像这样:

Paint

* Image decode (JPEG)
* Image resize (non-cached)
* Image decode (JPEG)
* Image resize (non-cached)
* ...

Paint

* Image resize (cached)
* Image resize (cached)
* Image resize (cached)
* Image resize (cached)

Paint

* Image decode (JPEG)
* Image resize (non-cached)
* Image decode (JPEG)
* Image resize (non-cached)
* ....

Paint

* Image resize (non-cached)
* Image resize (non-cached)
* Image resize (non-cached)
* Image resize (non-cached)

Paint

* Image decode (JPEG)
* Image resize (cached)
* Image decode (JPEG)
* Image resize (cached)
* ...

等等

我不确定为什么某些 Paint 事件包括图像解码而其他事件不包括，也不确定为什么有时缓存调整大小有时不缓存。我想这一定与进入视口(viewport)的新图像有关。

我能做些什么来确保在页面加载时我只为每张图片支付一次图片大小调整成本，并避免在滚动过程中调整图片大小？

(当然，我知道最好的解决方案是通过加载已经具有适当大小的图像来避免浏览器调整大小。在这种情况下，这是不切实际的。)

Answer 1

此函数将允许您仅调整一次图像大小，方法是将其替换为按所需比例调整大小的新图像:

function resizeImage(image, maxWidth, maxHeight) {

  // Output scale is the minimum of the two possible scales
  var scale = Math.min((maxWidth / image.width), (maxHeight / image.height))

  // Output canvas
  var outputCanvas = document.createElement('canvas')
  outputCanvas.width = image.width * scale
  outputCanvas.height = image.height * scale

  // Draw image content in output canvas
  var outputContext = outputCanvas.getContext('2d')
  outputContext.drawImage(image, 0, 0, parseInt(image.width * scale), parseInt(image.height * scale))

  // Replace image source
  image.src = outputCanvas.toDataURL()
}

它将您传递的图像作为 image 参数，并创建一个调整 image 大小的 Canvas ，然后设置 image.src属性到输出 Canvas 的内容，使用 toDataURL()。

您调整大小的图像必须在相对路径中(是的，这并不酷)，否则如果不满足，您将因 CORS 而出现安全错误。

但是您可以将 base64 数据作为 src 属性传递，并且使用 AJAX 可以很容易地做到这一点。