0

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!

Mark
  • 3,653
  • 10
  • 30
  • 62

2 Answers2

1

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.

  • Not an option as the images are user posted images from all over the internet, so there is no way to know ahead of time the actual sizes of the images – Mark Mar 20 '12 at 21:56
  • Your server side language like php can do this http://php.net/manual/en/function.getimagesize.php – rlemon Mar 20 '12 at 21:58
  • Not disagreeing with you, @rlemon, just that most don't anymore because they're either lazy, or think that these attributes belong in a stylesheet (and not many people have dynamically-generated stylesheets) because of a religious infatuation with "Web 2.0" (which means different things to different people, but generally emphasizes as little markup in your HT'M'L as possible) –  Mar 20 '12 at 22:02
0

You can try to attach onload handler events to each img. Then when the img is loaded, have a simple if statement do the following:

-if the img is loaded before the current scroll position, adjust the scroll position by $(img).height()

See How to scroll the window using JQuery $.scrollTo() function

Community
  • 1
  • 1
martyn
  • 131
  • 1
  • 3