Question

I am building a mobile version of a website where the page data loads very quickly, but since the images on the page are large, they come in more slowly over time.

The issue is that as the images come in slowly, they push the content of the page down so the user loses his reading position.

What I want to do is determine the sizes of these images and then leave a correctly sized black placeholder for the image which will fill in with the image as it loads. So that the users reading experience is not jarred while the images open.

I was wondering if its possible to get the dimensions of the images with javascript or html5 before the image loads and then go in with jscript/html5 and set width and height attributes to the tags on the initial page load– before the images fully have loaded.

Thanks!

*EDIT: I cannot use the width and height HTML attributes off the bat, since the images are from all different sources with no pre-known width and heights (its mostly random user posted images)

Answer 1

This is what the height and width attributes are for on the <img /> element. Set those to the height/ width of the image, and that space will be reserved by the renderer.

Otherwise you’re in a chicken-and-egg situation; you can’t magically find the size of the image; you need to download it first!