我正在加载大图，让浏览器调整大小。我明确地设置大小。
<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事件包括图像解码，而其他的没有，而且为什么有时调整大小是有缓存的，有时它不是。我想这必须与进入视图端口的新图像有关。
有没有什么可以做的，以确保在页面加载时，我只需支付每张图像的图像调整费用一次，并避免图像在滚动期间调整大小？
(当然，我理解最好的解决方案是通过加载已经具有适当大小的图像来避免浏览器调整大小，在这种情况下这是不实际的。)
解决方法
此功能将允许您仅将一次图像调整大小，将其替换为按照所需比例调整大小的新图像：
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,parseInt(image.width * scale),parseInt(image.height * scale))
// Replace image source
image.src = outputCanvas.toDataURL()
}
它将您传递的图像作为图像参数，并创建一个画布，调整图像大小，然后使用toDataURL()将image.src属性设置为输出画布的内容。
您调整大小的图像必须位于RELATIVE路径中(是的，它不是很酷)，否则由于CORS而导致安全性错误，如果不满足。
但是您可以将base64数据作为src属性传递，并且可以使用AJAX轻松实现。
