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（）拒绝工作，但到目前为止这个插件没有问题，所以我坚持使用它。

Answer 2

你可以看一下masonry-jquery插件，它有一个满足你要求的函数imageloaded。

Answer 3

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

您可能希望尝试渲染到隐藏的Iframe，然后在渲染后将内容从那里复制到页面中。

Answer 4

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

Answer 5

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

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

Answer 6

除了成功和错误之外，$ .ajax还有一个完整的处理程序，可以在完成ajax调用时执行代码。没有一个与你的代码相关的例子，我不确定它是你正在寻找的，或者你已经检查过了，但我在想你是否在完整的处理程序中运行了你的函数而不是成功处理程序，图像应该已经加载并准备就绪。

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

6 个答案: