将图像调整/拉伸到仅在页面加载后才知道的尺寸答案

【问题标题】：Sizing/stretching images to dimensions known only after page load将图像调整/拉伸到仅在页面加载后才知道的尺寸
【发布时间】：2011-11-21 21:43:07
【问题描述】：

在我的网站上，用户可以上传大图。我这样显示这些图像：

<img id="userImage" src="userImage.ashx?width=740&id=4fc265d4-a83c-4069-8d6d-0fc78ae2840d">

userImage.ashx 是一个根据 id 返回图像文件的处理程序，因此在此示例中返回用户 4fc265d4-a83c-4069-8d6d-0fc78ae2840d 的图像。您还可以设置其他属性 - 在此示例中仅给出 width。调整图像大小，使其宽度为 740 像素。

一旦页面的其余部分加载完毕，我在 javascript 中设置了图像的src。通过这样做，我知道图像必须有多宽才能填充所有可用空间：

var width = document.getElementById("userImageHolder").getComputedSize().width;
document.getElementById("userImage").src = "flash/userImage.ashx?type=micrositePhoto&id=" + userId + "&width=" + width;

这一切正常，但图像不会加载，直到页面上的所有其他内容都加载完毕。对于一个简单的问题，我有一个复杂的解决方案。

有没有更好的方法来做到这一点？缩小/拉伸图像以填充仅在页面加载后才知道的区域的最佳方法是什么？

【问题讨论】：

也许您可以加载一个大致为您想要的大小的图像，并通过更改图像标签的高度/宽度来使用 javascript 对其进行缩放？

标签： javascript asp.net html css

【解决方案1】：

找出宽度和高度的上限并生成该大小的图像，然后使用max-width/max-height 允许浏览器根据浏览器窗口的大小自动缩放。

【讨论】：

【解决方案2】：

尝试在onDOMReady 处理程序中预加载您的图像，然后插入onLoad 处理程序。虽然这不能保证图像在其他所有操作之前加载，但它们至少可以更早地开始加载。

像这样（使用 jQuery）：

$(document).ready(function(){
  var imageArray = [],
  imageSrc = [];

//Fill image src array from somewhere

  var len = imageSrc.length;
  for(var i = 0; i < len; i++){
    var img = new Image();
    img.src = imageSrc[i];

    img.onload = function(){
      //Do something with your loaded image
      imageArray.push(this);
    }
  }
});

【讨论】：