Question

我有一项服务从我的服务器提取数据并将其填充到页面上的容器中。我试图在数据完全加载（图像和所有）到元素后触发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>

有什么建议吗？

Answer 1

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

您需要执行类似

的操作在您从$e.trigger('load')函数返回之前

success。

Answer 2

load事件仅受以下标记（source）支持：

体
帧
frameset
IFRAME
IMG
输入[类型= “图像”]
链接
脚本
式

因为#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。注意，您可能需要添加一些逻辑来处理图像无法加载的情况。

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

2 个答案: