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

Sizing/stretching images to dimensions known only after page load

本文关键字：加载 调整 图像      更新时间：2023-09-26

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

<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;

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

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

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

尝试在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);
    }
  }
});
相关文章：