Question

我尝试在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被触发之前获取信息（以及在加载图像的元数据之后的原因），以便我可以在页面上显示它的一部分？

Answer 1

如果你正在使用jQuery，并且要求图像大小，你必须等到它们加载，否则你只会得到零。

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

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

Answer 2

只需使用适当的回调即可使您的函数异步：

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

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

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

希望如果适合你。

Answer 3

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

如何在完全加载JavaScript之前获取图像的宽度和高度？

3 个答案: