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

Question

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

$(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>

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

有谁知道如何在所有图像调整大小后立即触发此功能？

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