Question

假设我有一个页面index.html我的脚本正在运行，页面content.html是一个非常庞大，丰富的文档，其中包含图像和样式文本。我正在content.html上将<div id="container"></div>的内容加载到index.html上：

$.get("content.html", function(data, textStatus, jqXHR) {
  $("#container").html(data);
  contentLoadedCallback();
});

在上面的示例中，只要将内容html插入容器中，就会调用contentLoadedCallback()。但是，如果我想在回调中做一些事情，需要知道容器的整个高度，比如初始化自定义滚动条呢？ $("#container").height()还不准确，因为所有图片刚刚开始加载，并且随着更多内容的加载，它们会更改内容的高度。

我现在正在使用https://github.com/desandro/imagesloaded来检测内容中的所有图片何时加载完毕然后触发我的回调。但是，这会减慢一切...我的页面在容器上方有一个很大的“loading ...”消息，用于加载每个图像所需的整个时间。

我可以看出文档似乎“知道”每个图像在加载之前的高度，因为就像图像开始加载一样，页面的其余部分会移动以给它提供适当的空间量。图像被赋予其自己的正确尺寸的“容器”，然后图像逐渐加载到该空间中。理想情况下，我想要做的是捕获图像“容器”就位的事件，而不必等待图像本身完全加载。我想在我开始加载内容之后尽快检测到完整的最终高度（返回上面的例子）#container。

我正在尝试做什么？

Answer 1

我认为content.html上的那些图像是动态放置的。如果您有这些图像服务器端，则可以将height和width属性分配给这些<img>标记，并使用它们来更快地确定容器的实际大小。如果你不知道那些图像服务器端的尺寸，那么它将无法工作。这里有一些信息： Should I specify height and width attributes for my IMGs in HTML?

jQuery - 如果我们知道ajax加载元素的真实高度（带图像），如何执行脚本？

1 个答案: