Gallery dynamically updated

[omar.be...@gmail.com]

Hello,

I'm planning to create a gallery that is updated dynamically with elements, while the user scrolls the page down. I've seen the sample code in this page:

https://www.polymer-project.org/components/core-animated-pages/demos/grid.html

Basically, the content of the Gallery (grid) is provided by the elements in the table "items" and all the elements are rendered using the template

<template repeat="{{item in items}}">

I'm wondering if a solution for my needs would be the following:

- Update the items table, using AJAX requests, to push elements into the "items" array (Would I face performance issues because of a refresh of all the HTML elements updated again, although not changed ??? )

- Start the AJAX request when the user scrolls to some point of the screen ( Any easy way to have acheive that ???)

Thanks,

Omar

[Rob Dodson]

- Update the items table, using AJAX requests, to push elements into the "items" array (Would I face performance issues because of a refresh of all the HTML elements updated again, although not changed ??? )

If you're pushing new items into an array, it won't rebuild the entire DOM. It should only add the new items

- Start the AJAX request when the user scrolls to some point of the screen ( Any easy way to have acheive that ???)

I would listen for scroll events (make sure to debounce them), and check the window.scrollY and compare that against the offset of the container plus its height. If you just want to check when you've reached the bottom of the page, there's a StackOverflow thread which has a simple example. 

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/8dc84145-6ade-4e9a-a390-07edb9ca927b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.