一旦知道ajax加载元素的真实高度(带有图像)，如何执行脚本?

问题描述

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

Say I have a page index.html where my scripts are running, and a page content.html which is a very large, rich document full of images and styled text. I'm loading the contents of content.html into <div id="container"></div> on my index.html with:

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

在上面的示例中，一旦将内容html插入到容器中，就会立即调用contentLoadedCallback().但是，如果我想在回调中做一些需要知道容器全高的事情，例如初始化自定义滚动条，该怎么办? $("#container").height()尚不准确，因为所有图像都刚刚开始加载，随着更多图像的加载，它们将改变内容的高度.

In the above example, contentLoadedCallback() is called as soon as the content html is inserted into the container. But what if I want to do something in that callback that needs to know the full height of the container, such as initialize a custom scrollbar? $("#container").height() won't be accurate yet, because all the images have just started loading and they will change the height of the content as more are loaded.

我现在正在使用 https://github.com/desandro/imagesloaded 来检测所有内容中的图像已加载完毕，然后触发了我的回调.但是，这减慢了一切速度……在加载每个图像的整个时间里，我的页面在容器上方都有一条很大的正在加载..."消息.

I'm now using https://github.com/desandro/imagesloaded to detect when all the images in the content are done loading and then firing my callback then. However, this slows everything down... my page has a big "loading..." message above the container for the entire time it takes to load every image.

我可以说文档似乎在加载每个图像之前知道"每个图像的高度，因为就像图像开始加载一样，页面的其余部分也会移动以便为其提供适当的空间.给图像提供自己的正确大小的容器"，然后将图像逐渐加载到该空间中.理想情况下，我想做的是捕获到该图像容器"就位的事件，而不必等待图像本身完全加载.而且，我想复合一下，以便能够在我开始向其中加载内容之后尽快检测出#container的完整最终高度.

I can tell that the document seems to "know" the height of each image before it's loaded, because just as an image begins loading, the rest of the page moves to give it just the right amount of space. The image is given its own "container" of the correct size, and then the image is gradually loaded into that space. What I want to do, ideally, is capture the event of that image "container" being in place, without having to wait for the image itself to fully load. And I'd like to compound that to being able to detect the full final height of (returning to my example above) #container, as soon as possible after i start loading content into it.

我想做的是可能的吗?

推荐答案

我假定content.html上的那些图像是动态放置的.如果您拥有这些图像服务器端，则可以将height和width属性分配给那些<img>标签，并使用它们更快地确定容器的实际大小.如果您不知道这些图像服务器端的尺寸，那么它将不起作用.这里一些信息:我应该为以下属性指定高度和宽度属性吗我的HTML IMG?

I assume those images on content.html were put there dynamically. If you have those image server side you could assign height and width attributes to those <img> tags and use them to determine the real size of your container a bit faster. If you don't know the dimensions of those images server side then it won't work.Here some info:Should I specify height and width attributes for my IMGs in HTML?

这篇关于一旦知道ajax加载元素的真实高度(带有图像)，如何执行脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！