If I have this code in the iPhone Safari or Android Browser...will it be slow?

Question

<div class="result">
   <div class="thumbnail">
        <img src="80x80.png">
   </div>
   <div class="name">
        Alex Hong
   </div>
</div>

The page will have 400 of these! A list of people and their thumbnails, all different. I will use JQuery LazyLoad, so that not all images are downloaded immediately. (The images are only downloaded when the user scrolls to that portion of the site).

Will the browser be able to handle it? Please give your expert advice. thanks.

By the way, I don't know if LazyLoad will work or not:

Due to webkit bug #6656 Lazy Loading wont give you any improvements in Safari. It will load all images you wanted it or not.

Answer 1

I don't doubt they'll be able to handle it but I would definitely do some sort of pagination 400 images is a lot for what I'm assuming will be a pretty small screen.

Answer 2

It will be very slow (at least on iPhone < 3GS).

In the sproutcore framework, there are long lists with lazy loading performing very well. You can check the UI demo.

But you can also use iScroll, because the default scrolling speed in webkit is very slow, and not adapted to long list like yours.

And finally avoid complex CSS in your list (like gradient etc..), because it is very slow for long list.