Question

在IE中它不会缩小巨大的图像。事实上，它可以扩展一些但不是全部。我通过设置小的宽度和高度属性来缩小它们。如何解决？

我这样做：

var $image = $('<img/>');
$image.attr('src', 'http://example.com/img.jpeg');
$image.load(function () {
  this.width = this.height = 100;
});

这样的事情。但并非所有图像都缩小了。而且，每次重新加载页面时，不同的图像都会缩小。

我发现了问题所在。请参阅img onload doesn't work well in IE7

IE 6&7 only fire "load" if they actually have to get the image from the server -- they don't if the image is already in local cache.，Jeremy Wadhams写道。

Answer 1

如果你在html元素中定义宽度和高度，这应该有效。在css中，IE6不符合标准，结果可能会有所不同。

对于最佳实践，您不应该在浏览器中重新调整图像大小，它会减慢一切并导致像素化。制作所需尺寸的图像副本，然后将这些图像链接到完整尺寸的图像（如果合适的话）。

一旦你完成了这项工作，请将这些图片远离我，远非我这么做。

Answer 2

您不应该让浏览器缩小图像。出于性能原因，这会让您的网站陷入困境。如果您强制用户的浏览器缩小“巨大”图像，那么他们必须首先完全下载所述图像，然后浏览器可以缩放它们，这会减慢其工作流程。与使用正确尺寸的图像相比，它也会花费更多的带宽。

您应该提供要向用户显示的尺寸的图像。如果您需要多种尺寸，则服务器上有多种尺寸的图像。硬盘空间很便宜，绝对比带宽便宜（无论是你的还是你的用户）。

IE中的图像onLoad问题

2 个答案: