动态数据填充元素后的onload事件

onload event after dynamic data populates element

本文关键字：onload 事件 元素 数据 填充 动态      更新时间：2023-09-26

我有一个服务，可以从服务器中提取数据并将其填充到页面上的容器中。我正在尝试在数据完全加载（图像和所有）到元素中之后激发一个onload事件。这里有一个例子：

<div id="DynamicContainer"></div>
<script type="text/javascript">
    $.ajax({
        url: "www.serverurl.com/service.ashx",
        async: true,
        success: function(data) {
            var e = document.getElementById("DynamicContainer");
            var $e = $(e);
            $e.hide();
            e.innerHTML = ""; // Clear contents
            e.onload = function() { // Set load event
                $e.show(); // (This isn't firing after the 'e.innerHTML = data' has completed loaded)
            };
            e.innerHTML = data; // The above "onload" event isn't firing after the contents have loaded.
        }
    });
</script>

有什么建议吗？

简单地设置innerHTML不会触发load事件。

你需要做一些类似的事情

就在从success函数返回之前的$e.trigger('load')。

load事件仅由以下标记（源）支持：

  • 车身
  • 框架
  • 框架集
  • iframe
  • img
  • input[type="image"]
  • 链接
  • 脚本
  • 风格

因此，由于#DynamicContainer不是其中之一，您将需要一个特别的解决方案。像这样的东西应该可以做到：

$.ajax({
  url: "www.serverurl.com/service.ashx",
  async: true,
  success: onSuccess
});

function onSuccess(data) {
  var $el = $('#DynamicContainer'), deferreds;
  $el.hide().html(data);
  deferreds = $el.find('img').map(getOnLoadDeferred);
  $.when.apply($, deferreds)
  .done(function() { $el.show(); });
  function getOnLoadDeferred() {
    var deferred = $.Deferred();
    this.onload = function imgOnLoad() { deferred.resolve(); };
    return deferred;
  }
}

基本上，您在隐藏的#DynamicContainer中呈现html响应，等待每个img激发load，然后显示#DynamicContainer。注意，您可能需要添加一些逻辑来处理图像加载失败的情况。

相关文章：