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

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

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

来源

2014-03-26 SpartakusMd

完成后，目前还不清楚你问什么。你在问什么时候你通过Ajax请求的内容已经被返回，或者你问的是什么时候你插入到你的文档中的图像全部被加载了？ – jfriend00

我在询问何时已插入到我的文档中的图像全部加载。 – SpartakusMd

请编辑您的问题，以便更清楚地了解这一点。 – jfriend00

如果您刚刚插入一堆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 
});

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

来源

2014-03-26 08:03:14 jfriend00

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

来源

2014-03-26 07:45:10 WhiteLine

当它触发事件成功意味着该文件被回叫请求的数据，因此准备好使用。也许我误解了这个问题 – WhiteLine

这个问题还不清楚。我发布了一条评论，要求澄清。你的回答只是显示了一个典型的ajax调用。 OP显然希望在动态加载的内容中与图像相关的内容，但并不完全清楚他们想要什么。 – jfriend00

@ jfriend00，我知道如何进行Ajax调用。我需要一个像DOM Ready这样的事件。 – SpartakusMd

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

类似的东西，你已经与Ajax调用

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

    // Count items here  

});

来源

2014-03-26 08:13:17 MentalRay

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

回答

相关问题