13 Nov 2012 6:29 AM #1
unmask when the background of a container is loaded.
sorry for my bad english.
I desing an application with Sencha touch .
Into my application , I have a container wich contains a big image as background.
I would like to mask the viewport and unmask when the background is completly loaded but I dont understand how to do that.
15 Nov 2012 6:11 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
You would need to load the image outside and then you can get a load event. Once it's loaded then you can set the background image to the image.Mitchell Simoens @LikelyMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services email@example.com
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
15 Nov 2012 3:33 PM #3
Could you clarify a little bit? Would you load using Ext.Img first, then assign as a background image after?
I am trying to do the same thing...
16 Nov 2012 11:10 PM #4
No , in fact I would like to load a picture as background of a container. The picture is big and takes some time so I would like to mask de viewport while the picture is loading and unmask it when de image is loaded.
17 Nov 2012 4:06 AM #5
Hi yes I am trying to do the same thing....I meant can Mitchell clarify a little bit.
When he says 'You would need to load the image outside and then you can get a load event. Once it's loaded then you can set the background image to the image.'
What does he mean by 'load the image outside' does he mean load it perhaps at init before anything else has loaded? I am not sure how to do this.
17 Nov 2012 8:31 AM #6
use Ext.img's load event which is fired when image is actually finished loading (check the docs)
use a listener to catch this event and only then add the image to the viewport.
Sencha guys, I think such a behavior (loading an image in the background and displaying a loading animation until it is loaded) is so common it could have been a part of the framework without waiting for extensions.
also, you can take a look at mitchel's image loader https://github.com/mitchellsimoens/Ux.ImageLoader for ideas.its from 8 months ago so not written for 2.1 but worth the look.