0

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();
});

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.

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.

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.

Is what I'm trying to do possible?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Mike Turley
  • 1,172
  • 1
  • 9
  • 26
  • are you in control of markup in content.html? Maybe You could set the height via inline style to every image and see if the total height is properly computed. – Fabrizio Calderan Mar 12 '12 at 12:23
  • I am in control of the markup, but in practice there are several "content.html"s with several hundred images, and I'd really like to avoid going through and changing that much markup. But I guess I will if I have to... – Mike Turley Mar 12 '12 at 13:11

1 Answers1

2

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?

Community
  • 1
  • 1
lmcanavals
  • 2,339
  • 1
  • 24
  • 35
  • Additionally, if those image are part of the design, you definitively know the width and height beforehand and should use it. Otherwise if it's a image gallery what you are loading, using thumbnails with a predefined size could also be a solution. – lmcanavals Mar 12 '12 at 12:35
  • The images aren't put there dynamically, but they don't have static height and width (many of them have height and width dependent on the container size, and the container is subject to resize). – Mike Turley Mar 12 '12 at 13:06