加载大小的图像事件

Question

正如您在网页加载大图像时看到的那样，浏览器可以在加载开始时知道图像大小（宽度和高度）。

我正在寻找一种在 Javascript 中添加在尺寸已知时调用的事件（而不是在加载完整图像时）的方法；有点像metadataloaded 的视频。

代码示例：

var img = new Image();
img.src = 'images/picture.jpg';

console.log(img.width,img.height);  // 0, 0 (image size is not known yet)

img.addEventListener('imagesizeloaded', () => {
    console.log(img.width,img.height);  //expected: 1024, 768 (for example)
});

Answer 1

您可以在服务器上创建一个 AJAX 回调来获取元数据。更好的是，发送带有文件名的元数据。

使用 jQuery 的示例（客户端）：

var img = new Image();
img.src = "images/picture.jpg";

$.get("ajax.php", {action: "getImageSize", url: img.src})
 .success(function(r){
   console.log(r.width, r.height)
 })

服务器部分取决于您使用的服务器端技术。它需要

open the image by its url
read the image metadata
send a JSON response

---

在最坏的情况下，您可以轮询图像数据，直到它不为零。

var img = new Image();
img.src = "images/picture.jpg";

(function testImageSizeKnown(){
  if(img.height && img.width){
    console.log(img.height, imp.width)
  }else{
    setTimeout(testImageSizeKnown, 100) // check every 100 ms
  }
)()