javascript - 图像高度在附加元素上返回 0

Question

我正在附加 div，我需要获取图像的高度和宽度。我需要根据图像的高度/宽度向 MB-Container 类添加 css

example: portrait -> container width 100%, landscape -> 'self-align':'flex-end'

$('.MB-Container').append('' +
  '<div class="Cover-Item">' +
    '<img src="' + cover + '" style="width:100%; height:100%;"/>' +
    '</div>' +
  '</div>');

但是，当尝试获取图像的高度和宽度时，我得到的高度为零:

var itemWidth = $('#item1 .Cover-Item img').width();
var itemHeight = $('#item1 .Cover-item img').height();

如何在 append 中添加 onload 函数来检查图像的宽度/高度？

我试过:

$(document).on("load",".Cover-Item img", function() {

}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
   console.log($(this).load());
     $(this).load();
});

但这只会触发一次。

Answer 1

实际的 onload 函数在您的示例中是空白的。这可能有效:

$(document).on("load",".Cover-Item img", function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
   console.log($(this).height());
});