javascript - 在呈现之前加载所有 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());
                }
            }
        });

更新:我尝试使用 .load() 等待内容完全加载:

(...)
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 而不是 .ready 只会导致回调函数永远不会运行。文档说它有问题，如果图像被浏览器缓存，可能不会被调用，但我不知道这是否真的发生了。

Answer 1

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