在渲染之前加载所有AJAX内容（包括图像）

Question

我正在处理需要自动加载内容并将其插入页面开头而不影响页面垂直滚动位置的项目。插入内容，计算其高度，然后将其添加到页面的滚动位置对我来说目前为止已经奏效，但现在我遇到了如果存在图像时无法获得正确高度的问题（可能是因为这些图像天堂尚未装入）。如何在将内容插入页面之前加载图像，以便在插入时计算正确的高度？还是有更好的方法去做这件事？

一些供参考（简化）代码：

 $.ajax({ 
      type: "POST", 
      url: post_url, 
      dataType: "json", 
      data: post_data, 
      success: function(data, stat, jqXHR) { 
       if (data.content.length) { 
        var updates = build_content(data.content); 
        $(updates).insertAfter("#" + id + " .reload_button"); 
        // Works if there's no external content 
        $("#" + id).scrollTop($("#" + id).scrollTop() + $(updates).height()); 
       } 
      } 
     }); 

更新：

(...) 
var updates = build_posts(data.response.posts).hide(); 
$(updates).insertAfter("#" + id + " .reload_button"); 
console.log("Waiting for DOM to load completely @ " + new Date().getTime()); 
updates.ready(function() { 
    console.log("Done @ " + new Date().getTime()); 
    $(updates).show(); 
    (...) 

这是我一直在使用.load（）等待直到完全加载的内容尝试显然加载了相同的毫秒，它插入了内容，这不可能是正确的，因为它也必须加载图像。我在这里犯了一个明显的错误吗？

更新：使用.load而不是.ready只会导致回调函数永远不会运行。该文件说，它是越野车，并可能不会被称为如果图像缓存的浏览器，但我不知道这是否真的发生了什么。

Answer 1

我最终用Alexander Dickson的waitForImages jQuery插件解决了这个问题。我不知道为什么.load（）拒绝工作，但到目前为止，这个插件没有问题，所以我坚持使用它。

Answer 2

你可以看看masonry-jquery插件有一个imageloaded函数来满足你的需求。

Answer 3

您无法真正控制在页面中加载项目的顺序。当然，您可以先使用JavaScript加载图像，然后将它们放入缓存中，但是在将其插入DOM之前，必须解析传入的HTML以使其工作。

您可能想要尝试渲染到隐藏的iframe，然后将内容从那里复制到您的页面中，然后在其中呈现。

Answer 4

如果这些图像在初始标记中，那么您应该能够在load事件处理程序中运行您的代码。只有加载了所有内容（包括图像）后才能触发load事件。

Answer 5

如果已知内容的最大高度，那么您可以简单地设置页面的样式，以允许它在某个位置加载内容而不会打扰页面。

这是一个非常简单的jsFiddle example，当您向下滚动页面并单击一个项目（任意事件）来“加载”顶部内容时，滚动位置不受影响。

Answer 6

除了成功和错误$ .ajax还有一个完整的处理程序，在完成ajax调用时执行代码。 真的没有一个与您的代码相关的示例，我不确定这是您正在寻找的内容，还是您已经检查过它，但是我想如果您在完整处理程序而不是成功处理程序，图像应该已经加载并准备就绪。