Question

我使用jQuery Ajax在页面中动态加载内容。内容包含图像，因此我需要知道将在何时加载所有图像，例如DOM Ready。

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

Answer 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
});

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

Answer 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
    }
});

Answer 3

你可以使用on方法加载。计算总共有多少项，并使用load事件加载总图像数。你甚至可以建立一个像这样的进度条。

类似的东西，在你完成ajax调用之后

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

  // Count items here      

});

jQuery ajax内容在div中加载，事件就绪

3 个答案: