Help with changing background image within app

[Allan]

I currently have 4-5 views in my app, I use a flat scheme, and I use same background image which I set in CSS:

.km-flat .km-view .km-content {
    background-image: url(../styles/images/background11.png);
    background-size: cover;
    background-repeat: no-repeat;
}

I want to have a function where a user can choose another background image.  I've implemented a listview, where I get the item the user selects and then I implement a switch case as follows. 

 switch(text1)
                {
                    case "1":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background11.png')");
                        break;
                     case "2":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background12.png')");
                        break;
                     case "3":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background13.png')");
                        break;
                     case "4":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/ background14.png')");
                        break;     
                }

However I am not getting the desired results.Sometimes the image only switches for 1-2 view instead of all views.  I also get an ugly screen flash when I navigate between views.  It's as if every time I pick a new view, the new background image keeps being reset/updated which results in the screen flash

Can someone help me resolve these bugs?

[Kiril Nikolov]

Hello Allan,

Using this approach you are only changing the background-image for the views that have been initialized. If a view have never been navigate to it does not have content container in it, so you are practically not changing its background image. 

An alternative approach would be to use the data-init event of a view to set its background-image to, so you will make sure that the view has all its containers initialized, and you can actually set their background image.

Regards,
Kiril Nikolov
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Kevin]

What I would do is make a function that you execute in each view's show event. Store your chosen background in localstorage when they select it then have the show method check it, and set the background using that value. That way anytime anybody navigates to the view it'll check what the bg is supposed to be and set it. I'd also google some javascript image preloading code to implement on app start so there won't be any waiting time to load each bg when you switch