Background: I am developing a mobile site with lost of images, that take time to load on a 3G connection.
The way my mobile site is designed, is that when a user clicks on a link, the page will open somewhere in the middle of the text (position is defined by a div id).
The problem is this: If a user is reading pagetext in the middle of the HTML page, and an image loads up above the text, mobile safari actually pushes down the text below the viewport. So the user loses his position and has to scroll to find where he was at.
With a page that has lots of images, this happens over and over and over again.
The images themselves are user posted images from all around the internet, so the width and height of the images aren’t known ahead of time (to use the simple width/height attributes in the images src)
The question is this: I would like safari to maintain the person’s current reading position, regardless of whats going on with image loading above and below the position on the page the user is currently at.
Demonstrative example:
<div id="#p1">
Text text
<img>
<img>
<img>
</div>
<div id="#p2">
Text text
<img>
<img>
<img>
</div>
<div id="#p3">
Text text
<img>
<img>
<img>
</div>
<div id="#p4">
Text text
<img>
<img>
<img>
</div>
So if the viewport starts centered at div id #p3 on initial page load, and then the images in div #p1 and #p2 start filling in slowly over the 3G connection, Safari just pushes down the content to make room for the images, and the user is now staring at a bunch of images from div #p2 instead of the starting text of div #p3.
Thanks!
Simple: Define the image width and height in your HTML for every image. Then the renderer knows how much space to leave in the rendered page for the incoming images, and scrolling can’t be affected.
This is how it was solved years ago when everyone still had dial-up.