Javascript 如何在所有图像调整大小后触发调整大小事件

我有一个在调整窗口大小时调用的函数

$(window).resize(setVideoElements);

该函数用于设置一类视频缩略图容器的高度

var setVideoElements = function () { setElementsHeight('.videothumbnail'); };

function setElementsHeight(selector) {

    console.log('setting Max element height');

    // Get an array of all element heights
    var elementHeights = $(selector).map(function () {
        return $(this).height();
    }).get();

    // Math.max takes a variable number of arguments
    // `apply` is equivalent to passing each height as an argument
    var maxHeight = Math.max.apply(null, elementHeights);

    // Set each height to the max height
    $(selector).height(maxHeight);
}

该功能运行良好，只是触发速度过快

<div class="thumbnail videothumbnail">
  <a href="@Url.Action("Video", new { ID = Video.ID })">
    <img class="videoThumbnailImg" src="@Video.ThumbnailUrl" alt="">
  </a>
  <div class="caption">
     <h3>@Video.Name</h3>
     @foreach (var tag in Video.TagsToVideos)
     {
        <span><a href="#">@tag.Tag.Name</a></span>
     }
  <p>@Video.Description</p>
</div>

@视频。名称
@foreach（Video.TagsToVideos中的var标记）
{
}
@视频。描述

问题是函数在图像调整大小之前启动。我需要启动调整大小功能后，所有的图像已经被调整大小

有人知道如何在所有图像调整大小后启动此函数一次吗？

HTML元素有一个

onload

回调。当图像数据从其源下载完毕时，它将触发。利用此记录加载图像的时间。计算加载事件并在加载所有图像后调用

setElementHeight

示例如下所示：

---

如果有人想知道我需要清除我在“调整大小”菜单上设置的固定高度

var sources = ['img/a.jpg', 'img/b.jpg', 'img/c.jpg'],
    loaded = 0;

for (var idx in sources) {
  var img = document.createElement('img');
  img.onload = function() {
    loaded++;
    if(loaded === sources.length) {
      setElementHeight();
    }
  }
  img.src = sources[idx];
}

---

这很有意义，你知道没有所有的事件处理程序怎么做吗？没有事件处理程序是什么意思？关键是要利用onload事件，所以你需要事件处理程序。我的意思是没有为每个图像添加一个，它们是从无限滚动算法动态加载的，所以我必须将加载绑定到主体。这将肯定工作，虽然我只是希望有一种方式来绑定到一个容器或东西，但我不知道我想要的是不是可能的我认为我错了，图像已经加载我只需要启动功能后，调整大小的img发生

function clearHeight(selector) {
    $(selector).height('auto');
}