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

Question

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

$(window).resize(setVideoElements);

该函数设置一类videoThumbnail容器的高度

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>

问题是函数在图像调整大小之前触发。 我需要在所有图像都已调整大小后触发调整大小功能。

在所有图像都已调整大小后，有没有人知道如何触发此功能？

Answer 1

<img> 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];
}

Answer 2

对于任何想知道我需要清除我在调整大小上设置的固定高度的人

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