HTML5 Data Bindings Manual

Advanced: Showing a Preloader when Feed Data is Being Loaded

In this tutorial we will show you how to show a preloader when your HTML5 Data Bindings feed data is being loaded.

*You can also check out the video.

How to do it

1. We created a repeat region on our page, where we load hundreds of photos from Picasa User Album. We also created a Div container with a preloader image inside, which we want to display to our users until the feed is fully loaded.

2. Our preloader Div container has an id #loader (1).  Select the feed (2) and click the edit data source button (3).

3. In the HTML5 Data Bindings window, click the behaviors button.
   
   

4. In the Behavior connector window, select before the call for data is executed (1), select change property (2) and add the selected behavior (3).

5. In the change property window, select the preloader div (1), choose the display item (2) and enter block in the value field (3). When you're done, click OK.
   
   

6. Back in the Behavior connector, select when data is successfully loaded (1), choose change property (2) and add the selected behavior (3).

7. In the change property window, select the preloader div (1), choose the display item (2) and enter none in the value field (3). When you're done, click OK.

8. Now you can save your work and preview the results in your browser. That's how you can show a preloader when your HTML5 Data Bindings feed data is being loaded