locked
Background image doesn't load at first

    Question

  • My Javascript Metro style app is trying to use a ~250K background and I am getting very inconsistent results.  Sometimes it loads the background right away and sometimes it doesn't.  When it doesn't load it, if I Alt+Tab away and back it starts showing it!  Can you tell me what I'm doing wrong?  The CSS is:

    body {
        background-image: url('/images/view_bg.png');
        background-repeat: no-repeat;
    }
    
    .headerClass {
        margin-top: 45px;
        margin-left: 120px; 
    }
    
    .mainContent {
        margin-top: 31px;
        margin-left: 120px;
        margin-bottom: 50px; 
    }
    
    @media screen and (-ms-view-state: fullscreen-landscape) {
    }
    
    @media screen and (-ms-view-state: filled) {
    }
    
    @media screen and (-ms-view-state: snapped) {
    }
    
    @media screen and (-ms-view-state: fullscreen-portrait) {
    }
    

    and the HTML is:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>My Product Name</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
        <!-- MetroClient references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <h1 class="headerClass">My Product Name</h1>
        <div class="mainContent" id="mainContent">
            asdfafdsa
        </div>
    </body>
    </html>
    

    I have verified that inside of my deployment folder I have a folder named "images" with a file inside of it named "view_bg.png"

    Tuesday, June 19, 2012 6:49 PM

Answers

  • Hi Adam,

    There has been a bug filed for this problem.  You can workaround this issue by also setting the background after the pages loads.  I created a simple blank page with a huge background image (4.81MB) and added this code to basically refresh the page by setting the image again and this fixed the issue:

    args.setPromise(WinJS.UI.processAll());
                setImmediate(function () {
                    document.body.style.backgroundImage = "url('images/Alaska007.JPG')";
                });

    If you do not have the background set in the CSS style you may need to add a delay using setTimeout instead of setImmediate to allow the image to load in the background.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, June 20, 2012 5:45 PM
    Moderator

All replies

  • Do you mean the image isn't showing up in Blend/VS, or do you mean it isn't showing up when you actually run the app?

    Tuesday, June 19, 2012 7:34 PM
  • It isn't showing up when I actually run the app.
    Tuesday, June 19, 2012 7:41 PM
  • Adam,

    I was able to repro this with even simpler code:

    <body class="bodyClass" style="background-image: url('/images/splashscreen.png');">
        <p>Content goes here</p>
    </body>

    I will do some research and get back to you!

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, June 19, 2012 8:17 PM
    Moderator
  • Hi Adam,

    There has been a bug filed for this problem.  You can workaround this issue by also setting the background after the pages loads.  I created a simple blank page with a huge background image (4.81MB) and added this code to basically refresh the page by setting the image again and this fixed the issue:

    args.setPromise(WinJS.UI.processAll());
                setImmediate(function () {
                    document.body.style.backgroundImage = "url('images/Alaska007.JPG')";
                });

    If you do not have the background set in the CSS style you may need to add a delay using setTimeout instead of setImmediate to allow the image to load in the background.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, June 20, 2012 5:45 PM
    Moderator
  • Cool, thanks Jeff!  Hopefully it will be fixed by GA so I can remove the hack.  But it will serve me well for now.
    Wednesday, June 20, 2012 6:03 PM
  • jpsanders, i wanted to tell you, that i too have a bug when it comes to background-image.

    It seems one png file can work, while the other png file cannot work (blank, like it was not even loaded).


    Wednesday, June 20, 2012 6:55 PM
  • Hi Raymond,

    Did you try the setImmediate and setTimeout workarounds?

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, June 20, 2012 6:57 PM
    Moderator
  • No i did not, i will try it when i have the time, and i will report the result, just wanted to report a bug, where one png file can be used on CSS background-image, while other png file can not work (blank, as if the file does not exist). Both are png file, the smaller size png file is the one that works. The non working ones are bigger in file size.
    Wednesday, June 20, 2012 6:59 PM
  • do you want me to upload the 2 images here ?
    Wednesday, June 20, 2012 7:01 PM
  • No I want you to test your code with the workarounds :-)

    Jeff Sanders (MSFT)

    Wednesday, June 20, 2012 7:02 PM
    Moderator
  • it works !

    Nice.

    Wednesday, June 20, 2012 7:05 PM
  • Hi Adam,

    There has been a bug filed for this problem.  You can workaround this issue by also setting the background after the pages loads.  I created a simple blank page with a huge background image (4.81MB) and added this code to basically refresh the page by setting the image again and this fixed the issue:

    args.setPromise(WinJS.UI.processAll());
                setImmediate(function () {
                    document.body.style.backgroundImage = "url('images/Alaska007.JPG')";
                });

    If you do not have the background set in the CSS style you may need to add a delay using setTimeout instead of setImmediate to allow the image to load in the background.

    -Jeff


    Jeff Sanders (MSFT)


    I have this problem as well. This is like the very first thing I code in my app. Hope it is fixed in RTM.
    Thursday, August 09, 2012 5:21 PM
  • FWIW this issue went away once I moved to using a page-based UI layout with WinJS.Navigation.navigate.
    Thursday, August 09, 2012 6:30 PM