图像大小调整导致慢滚动

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)
* ...

等等

我不知道为什么有些油漆事件包括图像解码和别人不一样,也不知道为什么有时调整大小缓存,有时则不然.我想这必须与进入视口的新图像有关.

有什么我可以做,以确保我只付了图像大小调整成本每一次图像页面加载时,避免图像在滚动期间调整？

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

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,然后使用将image.src属性设置为输出画布的内容toDataURL().

您调整大小的图像必须处于RELATIVE路径(是的,它不是很酷),否则,如果没有满足,您将因CORS而出现安全性错误.

但是您可以将base64数据作为src属性传递,并且使用AJAX可以轻松实现.

Answer 2

CSS 在这里会有所帮助。这将作为默认设置，并可能会减慢单独的加载时间。要实现这一点，只需对图像执行基本的 css 即可。参考如下：

 <img src="....." />

对于您的 css，您需要以下代码作为示例：

 img {
height: 360;
width: 240;
}

然后，您可以添加额外的代码以具有圆角、边框或您可能想要的任何效果。

为了避免所有大小调整，这当然会有所帮助，那就是在 Photoshop 中调整图像大小。然后它只会显示图像，而不会在显示页面的不同部分时渲染每个图像。