0

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

有什么建议么？

4

2 回答 2

1

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

你需要做类似的事情

$e.trigger('load')就在从您的success功能返回之前。

于 2013-07-12T22:21:00.007 回答
0

该load事件仅受以下标签 ( source ) 支持：

  • 身体
  • 框架
  • 框架集
  • 框架
  • 图像
  • 输入[类型=“图像”]
  • 关联
  • 脚本
  • 风格

因此，既然#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;
  }
}

基本上，您以隐藏的方式呈现 html 响应#DynamicContainer，等待每个img触发load，然后显示#DynamicContainer。请注意，您可能需要添加一些逻辑来处理图像无法加载的情况。

于 2013-07-12T22:41:28.103 回答