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事件包括图像解码而其他人没有，也不知道为什么有时调整大小会被缓存，有时候不是。我想这必须与进入视口的新图像有关。

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

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

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属性设置为输出画布的内容{1}}。

你调整大小的图像必须处于RELATIVE路径（是的，这不是很酷），否则你将因CORS而出现安全错误。

但是您可以将base64数据作为toDataURL()属性传递，使用AJAX可以轻松实现。

Answer 2

你的问题是你正在同时下载大量图像，大量的大图像。如果有大量的大图像以及用户个人的ram和处理器限制，那么将它们渲染到除原始图像之外的不同尺寸也会很慢。

无论您告诉浏览器渲染图像的大小，浏览器仍会加载原始图像大小，然后即时调整它。大图像必须从用户互联网连接到服务器的浏览器。通过使用html属性，您所做的一切都是使用CSS在下载后更改图像大小。

您最好的选择是在服务器端创建多个图像大小，最好是在创建资产时而不是动态调用最接近您需要的图像大小。如果使用脚本动态创建映像等，请将它们保存在服务器上以便以后再次使用，并减少加载时间和服务器资源。

最后一个提示也是确保你正在缓存。更多信息http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

Answer 3

CSS会有所帮助。这将作为默认值，并可能减慢个人加载时间。要实现这一点，只需为图像做基本的CSS。参考如下：

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

对于你的css，你需要以下代码作为例子：

 img {
height: 360;
width: 240;
}

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

为避免所有调整大小，这当然有助于在Photoshop中调整图像大小。然后它只显示图像而不是呈现每个图像，因为页面的不同部分都显示出来。

Answer 4

大图像需要更多时间加载到内存（RAM），即使图像已经在内存（RAM）上，如果有大量内存消耗（太多大图像或有一个应用程序需要大量内存的背景），不可见（在可见区域之外）图像被推送到分页/交换文件（在硬盘驱动器上），因此当图像到达可见区域时，浏览器将从硬盘速度（慢速）的分页/交换加载。

在这种情况下，如果您在一个页面上有许多大图像，则无法依赖客户端调整大小，因为这会使您的客户端浏览体验变坏。

您应该考虑在服务器端调整图像大小，无论是按需还是预先调整大小（缩略图）。

如果是按需方法，您可以使用Apache的mod_rewrite将图像指向脚本，以调整客户浏览器请求的大小和图像。

查看热门图片共享/托管网站，查看随机图片并复制其网址，将其粘贴到其他标签页，然后通过更改/删除网址的某些部分来播放网址。你可以看到它们在服务器端动态调整图像大小。

TLDR ：如果您坚持不使用缩略图，则无法在页面上使用许多大图像进行平滑滚动，使用缩略图或进行不连贯的滚动。

哦，还有一件事需要考虑，那就是增加你的（和你的客户端）RAM来处理这样的内存需求

图像大小调整导致慢滚动

4 个答案: