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

Question

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

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

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

一旦页面的其余部分加载，我就在javascript中设置图像的src。通过这样做，我知道图像填充所有可用空间的宽度：

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

这一切都有效，但是在页面上的其他内容都加载之前，图像不会加载。我对一个简单的问题有一个复杂的解决方案。

有更好的方法吗？缩小/拉伸图像以填充仅在页面加载时已知的区域的最佳方法是什么？

Answer 1

尝试在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);
    }
  }
});

Answer 2

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