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

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

$.ajax({
url:“www.serverurl.com/service.ashx”，
async:true，
成功：功能（数据）{
var e=document.getElementById（“DynamicContainer”）；
var$e=$（e）；
$e.hide（）；
e、 innerHTML=“；//清除内容
e、 onload=function（）{//设置加载事件
$e.show（）；//（在“e.innerHTML=data”加载完成后不会触发此命令）
};
e、 innerHTML=data；//加载内容后，不会触发上述“onload”事件。
}
});

---

有什么建议吗？

简单地设置innerHTML不会触发加载事件

你需要像这样做

---

$e.trigger（'load'）

刚刚从

success

功能返回之前。

只有以下标记（）支持

load

事件：

• 身体
• 框架
• 框架集
• iframe
• img
• 输入[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

触发

加载

，然后显示

#DynamicContainer

。注意，您可能需要添加一些逻辑来处理图像无法加载的情况。

这完全有道理，谢谢！关于只有在下载元素的图像和内容后才触发的建议？一旦进入

success

功能，

data

包含您从服务器请求的所有内容。所以我不确定你在问什么，因为只要你在设置内容后

触发

，它就会工作。数据中有很多图像，我不希望容器显示，直到所有图像都下载完毕。手动触发加载触发器使其在图像和内容加载后不会实际触发。