在呈现之前加载所有AJAX内容，包括图像

Load all AJAX content, including images, before rendering

本文关键字：内容 AJAX 包括 图像 加载      更新时间：2023-09-26

我正在研究一个项目，该项目需要自动加载内容并将其插入页面的开头，而不会干扰页面的垂直滚动位置。插入内容，计算其高度，然后将其添加到页面的滚动位置对我来说已经工作到目前为止，但现在我遇到的问题，它没有得到正确的高度，如果有图像(大概是因为这些图像还没有加载)。如何在将内容插入页面之前加载图像，以便在插入时计算正确的高度?或者有更好的方法去做这件事吗?

一些(简化的)代码供参考:

        $.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();
    (...)

它显然是在插入内容的同一毫秒内加载的，这可能是不对的，因为它还必须加载图像。我犯了一个明显的错误吗?

Update:使用。load而不是。ready只会导致回调函数永远不会运行。文档说，这是错误的，可能不会被调用，如果图像缓存的浏览器，但我不知道这是不是真的发生了什么。

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

你可以看一下mason -jquery插件里面有一个函数imageloaded，满足你的要求

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

您可能想要尝试渲染到一个隐藏的Iframe，然后将内容从那里复制到您的页面。

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

如果有一个已知的内容的最大高度，那么你可以简单地设计你的页面，允许它在不干扰页面的情况下加载内容。

下面是一个非常简单的jsFiddle示例，当您向下滚动页面并单击一个项目(任意事件)以"加载"顶部内容时，滚动位置不受影响

除了成功和错误$。Ajax还有一个完整的处理程序，在Ajax调用完成时执行代码。不要真的有一个例子，将是相关的你的代码，我不确定这是你正在寻找的，或者如果你已经检查出来了，但我在想，如果你运行你的功能在完整的处理程序，而不是成功的处理程序的图像应该已经加载并准备好了。

相关文章：