在完全加载 JavaScript 之前，如何获取图像的宽度和高度？ [复制]答案

【问题标题】：How can I get the width and height of an image before completely loaded with JavaScript? [duplicate]在完全加载 JavaScript 之前，如何获取图像的宽度和高度？ [复制]
【发布时间】：2016-08-24 10:18:24
【问题描述】：

我试图在图像显示在 HTML 上之前获取它们的实际大小，并且在大多数情况下我都会使用它：

var imgae = new Image();
image.src = img.src;
image.onload = function() {
    // Do something with image.width and image.height
    // and insert an <img> into <body>
}

但是，如果图像太大以至于下载可能需要几秒钟的时间，用户必须等到完成后才能看到图像。有什么方法可以在触发Image.onload 之前（以及加载图像的元数据之后）获取信息，以便我可以在页面上显示部分信息？

【问题讨论】：

@AlexD setInterval 对我有用，虽然在这里看起来很奇怪。非常感谢。
这里已经回答了这个问题：stackoverflow.com/questions/6575159/…

标签： javascript html

【解决方案1】：

如果您使用的是 jQuery，并且您正在请求图像大小，则必须等到它们加载完毕，否则您只会得到零。

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

如果您使用的是 jQuery 3.0，请记住 load 方法已被删除，请使用 $('img').on('load', function() {})

【讨论】：

如果您使用的是 jQuery 3.0，请记住 load 方法已被删除，请改用 $('img').on('load', function() {})。

【解决方案2】：

  var _URL = window.URL || window.webkitURL;
  function displayPreview(files) {
    var file = files[0]
    var img = new Image();
    var sizeKB = file.size / 1024;
     img.onload = function() {
       $('#preview').append(img);
       alert("Size: " + sizeKB + "KB\nWidth: " + img.width + "\nHeight: " + img.height);
       }
       img.src = _URL.createObjectURL(file);
      }

【讨论】：

【解决方案3】：

您可以使用适当的回调使您的函数异步：

function loadImages(imgsrc, callback) {
    var image = new Image();
    image.onload = callback;
    image.src = imgsrc;
}

然后你就可以像这样轻松调用这个函数了

loadImages('you image src', function() {
    // whatever code to be executed
});

希望对你有用。

【讨论】：