Progressive page loading

[Georgios Diamantopoulos]

Gents,

I'm somewhat confused about progressive page loading with angular.

We have a web application where we would like to display an activity indicator while that part of the page is being rendered.

This includes data from the API AND images. 

Providing an activity indicator for data has been simple. We watch() for a function that wraps around $http.pendingRequests.length and wait until length=0 to emit an event which kills the activity indicator.

There are several ng-includes in the HTML and since angular uses $http to retrieve the templates, it will gracefully wait until the templates have been loaded too. 

So far, so good.

(A) 

However, this event finishes BEFORE images that are included in the templates are loaded. 

They are images found in the CSS but I don't expect different behavior for inline images.

How could I wait for template images to be loaded before killing the indicator?

(B)

Are we going to have the same problem with data-bound images?

Meaning, in the case that our API returns an image URL which we then bind to an <img>, will the image "suddenly" appear?

How can we wait for it to be loaded before showing the data-bound part of the page?

(C)

Is there a way to start the indicator before angular has had a chance to bootstrap?

Thanks

Georgios

    

[Jose Sosa]

Hi Georgios,

I have had a similar issues with an AEM content in an Angular rendered component on a page and we needed to wait for the user to scroll down to get an image impression for analytics and tracking. We used a component directive approach to wrap the AEM content component around a show/hidden Boolean value on element. Then placed a watch on the element value if viewed trigger the impression.

This is just one approach, you could also use a simple event listener at the end of the application load and do not trigger a callback until the application is fully loaded after the last component such as the footer loads then trigger a callback to the event listener and remove your indicator then.

Many ways to do this.

Thanks,

Jose