图片加载完成后的事件

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

- Yukulélé

---

我认为 load 是唯一的选择。 - Pekka

你可以通过其他方式发送元数据。 - John Dvorak

我认为这样的事件（图像头已加载）不存在。 - John Dvorak

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

- John Dvorak

---

谢谢！我想要一个非服务器依赖的解决方案，那么第二个版本对我来说更好，但是是否可以使用监听器的“onprogress”事件（在图像或xhr2发送数据到新图像时）而不是使用超时？ - Yukulélé

@Yukulélé 根据MDN的说法，图像元素似乎没有可以使用的“progress”事件 - 通过XHR获取图像数据似乎有问题（您仍然可能需要能够解析部分二进制数据，以及最终显示图像）。您可以将“onprogress”处理程序附加到图像上，但我怀疑它是否会被调用。 - John Dvorak