jQuery ajax 内容加载到 div 中，事件准备就绪答案

【问题标题】：jQuery ajax content loaded in div, event readyjQuery ajax 内容加载到 div 中，事件准备就绪
【发布时间】：2014-03-26 07:41:41
【问题描述】：

我正在使用 jQuery Ajax 动态加载页面中的内容。内容包含图像，所以我需要知道在什么时候加载所有图像，例如 DOM Ready。

最初内容将被隐藏。成功加载图像后，我显示包含它们的 div。有没有一种方法可以检测使用 Ajax 加载的内容何时可以显示？当从服务器返回文本响应时调用 Ajax success 函数，但我需要在所有加载和图像加载时执行一个函数。

【问题讨论】：

不清楚你在问什么。您是询问您通过 Ajax 请求的内容何时返回，还是询问您插入到文档中的图像何时全部加载？
我在询问我插入到文档中的图像何时全部加载完毕。
请编辑您的问题以更清楚地说明这一点。

标签： jquery ajax jquery-events document-ready

【解决方案1】：

如果您刚刚在文档中插入了一堆 HTML（包含一些 <img> 标记）并且您想知道所有这些新图像何时加载，您可以这样做。假设动态内容全部插入到#root 对象中。插入动态竞争后，您可以立即运行以下代码：

function notifyWhenImagesLoaded(rootSelector, callback) {
    var imageList = $(rootSelector + " img");
    var imagesRemaining = imageList.length;

    function checkDone() {
        if (imagesRemaining === 0) {
            callback()
        }
    }

    imageList.each(function() {
        // if the image is already loaded, just count it
        if (this.complete) {
            --imagesRemaining;
        } else {
            // not loaded yet, add an event handler so we get notified
            // when it finishes loading
            $(this).load(function() {
                --imagesRemaining;
                checkDone();
            });
        }
    });
    checkDone();
}

notifyWhenImagesLoaded("#root", function() {
    // put your code here to run when all the images are loaded
});

您在插入动态内容后调用此函数。它在动态内容中查找所有图像标签并检查是否已经加载。如果他们有，那就算他们。如果他们没有，那么它会安装一个加载事件处理程序，以便在图像加载时得到通知。当最后一张图片完成加载后，它会调用回调。

【讨论】：

【解决方案2】：

ajax

$.ajax({
    type: "POST",
    url: "myfile.*",
    data: {data : params}, 
    cache: false,
    success: function(return_data){
       //here you have the answer to Ajax
       //at this point you have the content ready for use
       //in your case here you would find the images that you got back from the file called by ajax
    }
});

【讨论】：

当它触发事件成功意味着文件被回调了请求的数据，因此已经“准备好”使用了。也许我误解了这个问题
问题不清楚。我发表了评论要求澄清。您的回答只是显示了一个典型的 ajax 调用。 OP 显然想要与动态加载的内容中的图像相关的东西，但并不完全清楚他们想要什么。
@jfriend00，我知道如何进行 Ajax 调用。我需要一个像 DOM Ready 这样的事件。
@SpartakusMd - 是的，我知道。我已经添加了我自己的答案来告诉你如何。我不是写这个答案的人。
@jfriend00，对不起。第一部分是给 Nicolo 的。

【解决方案3】：

您可以将 on 方法与负载一起使用。计算您总共有多少项目，并使用 load 事件来加载总图像的数量。你甚至可以像这样构建一个进度条。

类似的事情，在你完成 ajax 调用之后

$('img').on('load', function(){

  // Count items here      

});

【讨论】：