附加元素上的图像高度返回 0

Question

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

示例：纵向 -> 容器宽度 100%，横向 -> '自对齐':'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());
});