4

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

我正在寻找一种在 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)
});
4

1 回答 1

4

您可以在服务器上创建一个 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
  }
)()
于 2012-10-30T09:20:48.363 回答