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

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

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

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

---

有更好的方法吗？收缩/拉伸图像以填充页面加载后才知道的区域的最佳方法是什么？

尝试将图像预加载到

onDOMReady

处理程序中，然后插入

onLoad

处理程序。虽然这不能保证在加载其他内容之前加载图像，但它们至少可以更早地开始加载

类似这样的内容（使用jQuery）：

$（文档）.ready（函数（）{
var imageArray=[]，
imageSrc=[]；
//从某处填充图像src数组
var len=imageSrc.length；
对于（变量i=0；i

找出宽度和高度的上限，并生成该尺寸的图像，然后使用

max width/max height

允许浏览器根据浏览器窗口的大小自动缩放图像。

也许您可以加载一个大致与所需大小相同的图像，并通过更改图像标记height/width使用javascript缩放图像？

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

$(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);
    }
  }
});