Which images are being displayed

[Shivi]

Hi

I am trying to implement this new functionality in an online shop that
sells watches using AJAX and GWT.

I am displaying a list of products in a scrollPanel.

What I need to do is this:-

Imagine there being 100 products.
I populate the scoll panel with information about those 100 products
in a flexTable. First column shows an image of the watch. second
column shows the product information.

If user can see the 5th, 6th and 7th product from the table and then
he scrolls down fast and reaches the , lets say, 50, 51 and 52nd
product . I want to display only those images that are viewable to the
user. (and maybe at the same time load some more images around that
particular number of product image visible..i.e. from 47th - 55th
images )

This way I somehow reduce the load on the network by not displaying
all the 100 images in one go.

I think this is something like predicting user behavior .. Like the
way in google maps, the images are loaded only after the user scrolls
left , right , up down etc. Although I do know that google maps loads
the whole map in one big image and then displays the bits of the image
as the user scrolls.

How can I know which particular set of products (images) the user is
viewing (i.e the user's mouse is pointing at)?

Thanks in advance for your help.

[Shivi]

Another explanation of my problem:-

I want to pre-fetch the images around (on either side of) the
currently viewed ones

If the user (say) drags the scroll bar a long way up or down out of my
pre-fetch window
I am no longer pre-fetching and need to get what the user has dragged
to now ..so that I can display the page.

How can I know where the mouse is in the current view-port?

Thanks again for any help.
Shivi

On Apr 5, 3:06 pm, Shivi <shivi.chan...@gmail.com> wrote:
> Hi
>
> I am trying to implement this new functionality in an online shop that
> sells watches  using AJAX and GWT.
>
> I am displaying a list of products in a scrollPanel.
>
> What I need to do is this:-
>
> Imagine there being 100 products.
> I populate the scoll panel with information about those 100 products

> in aflexTable. First column shows an image of the watch. second

> column shows the product information.
>
> If  user  can see the 5th, 6th and 7th product from the table and then
> he scrolls down fast and reaches the , lets say, 50, 51 and 52nd

> product . I want to display only thoseimagesthat are viewable to the
> user. (and maybe at the same time load some moreimagesaround that

> particular number of product image visible..i.e. from 47th - 55thimages)
>
> This way I somehow reduce the load on the network by not displaying

> all the 100imagesin one go.

>
> I think this is something like predicting user behavior .. Like the

> way in google maps, theimagesare loaded only after the user scrolls

> left , right , up down etc. Although I do know that google maps loads
> the whole map in one big image and then displays the bits of the image
> as the user scrolls.
>

> How can I know which particularsetof products (images) the user is

[Shivi]

or maybe this is what I need to do:

To find out which particular set of rows of the flexTable are visible
in the current view port (window being displayed to the user ) of the
user.

does anyone know how I could do this?

Thanks again
Shivi

On Apr 5, 3:46 pm, Shivi <shivi.chan...@gmail.com> wrote:
> Another explanation of my problem:-
>
> I want to pre-fetch the images around (on either side of) the
> currently viewed ones
>
> If the user (say) drags the scroll bar a long way up or down out of my
> pre-fetch window
> I am no longer pre-fetching and need to get what the user has dragged
> to now ..so that I  can display the page.
>

> How can I know where themouseis in the current view-port?