加載大小的圖像事件

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