Question

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

我正在寻找一种方法在javascript中添加在已知大小时调用的事件（不是在加载完整图像时）;有点像metadataloaded for video。

代码示例（使用jQuery）：

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

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

$(img).on("imagesizeloaded",function(){
    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
  }
)()

加载大小的图像事件

1 个答案: