图像调整大小导致慢滚动 [英] Image resizing causing slow scrolling

问题描述

我正在载入大型图片，并让浏览器调整它们的大小。

I'm loading large images and having the browser resize them. I'm explicitly setting the size.

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

页面上有许多此类图片。滚动是非常缓慢和波动。滚动时，Chrome中的事件时间轴看起来像这样：

There are many such images on the page. Scrolling is very slow and choppy. The Events Timeline in chrome looks something like this when scrolling:

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事件包括图像解码，也不是为什么有时调整大小缓存，有时不是。我想它必须与进入视口的新图像有关。

I'm not sure why some of the Paint events include image decoding and others don't, nor why sometimes the resizing is cached and sometimes it is not. I guess it must have to do with new images coming into the view-port.

有什么我可以做，以确保我只支付图像调整大小

Is there anything I can do to ensure that I only pay the image resize cost once per image when the page loads, and avoid image resizing during scroll?

（当然，我知道最好的解决方案是避免浏览器调整大小）

(Of course, I understand that the best solution is to avoid browser resizing by loading in an image that is already of the appropriate size. In this case this is not practical.)

推荐答案

这个函数将会被加载到一个已经具有合适大小的图像中。允许您调整图片大小一次，方法是将其替换为以所需缩放比例调整大小的新图片：

This function will permit you to resize an image only once, by replacing it with a new image resized at the desired scale :

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 的大小，然后将 image.src 属性设置为使用 toDataURL（）。

It takes the image you pass as image parameter, and creates a canvas where it resizes image, and then sets the image.src attribute to the content of the output canvas, using toDataURL().

您调整的图片必须在RELATIVE路径<

Images you resize have to be in RELATIVE path (yes it's not cool), or you will have security error due to CORS if not fulfilled.

但是你可以传递base64数据为 src 属性，可以很容易地使用AJAX。

But you can pass base64 data as src attribute, and it can be easy to do it with AJAX.

这篇关于图像调整大小导致慢滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！