Question

我有一个包含多个页面的Web应用程序，所有页面都有一个页眉，内容和页脚。它们中的每一个都具有图像背景（每页的图像相同）。在第一次启动时，每次都正确加载内容和页脚背景图像。标题背景图像有时（几乎没有）加载，或者它与其他元素有延迟并在5-10毫秒后加载。当我移动到第二页 - 所有3个背景加载normaly，当我回到第一页时，它也bacome正常。所以我有两个场景 - 第一：

打开应用
标题背景图片为空
转到第二页 - 标题backgroind imege正常
回到第一页 - 标题backgroind imege正常

第二

打开应用
标题背景图片在5-10毫秒后加载

我该如何解决这个问题？ - HTML：

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <meta name="description" content="A Tizen Web UI FW single-page template generated by Tizen Web IDE" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />

    <link rel="stylesheet" href="/usr/share/tizen-web-ui-fw/latest/themes/tizen-white/tizen-web-ui-fw-theme.min.css" name="tizen-theme" />
    <title>Tizen Web IDE - Template - Tizen - Tizen Web UI Framework - Single-Page</title>
    <!--NOTE:
        jquery.js and web-ui-fw.js must be included.
        DO NOT REMOVE below code!
    -->
    <script src="/usr/share/tizen-web-ui-fw/latest/js/jquery.min.js"></script>
    <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
    <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js" data-framework-theme="tizen-white"></script>

    <!--NOTE:
        Additional scripts and css files are to be placed here.
        You can use jQuery namespace($) and all functionalities in jQuery
        in your script.  For example:

            <script src="main.js"></script>
            <link rel="stylesheet" href="my.css">
    -->
    <script type="text/javascript" src="./js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>

<body>

<!-- MAIN PAGE -->
    <div data-role="page" id="one">

        <div data-role="header" data-position="fixed" style="
        display:block; 
        text-align:left; 
        background: url('21.png') no-repeat fixed;
        background-position: center bottom;
        background-size:100%,100%;
        color: #000000;
        height: 25%;">
            <h2><font color="#000000">test</font></h2>
        </div><!-- /header -->       

        <div data-role="content" style="
        display:block; 
        text-align:center; 
        background: url('23.png') no-repeat center center fixed;
        background-size:100%,100%;">
                <p>text</p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed" style="
        display:block; 
        text-align:center; 
        background: url('22.png') no-repeat fixed;
        background-position: center top;
        background-size:100%,100%;
        color: #000000;
        height: 25%;">
            <h4></h4>
        </div><!-- /footer -->
    </div><!-- /page -->


<!-- SECOND -->  
    <div data-role="page" id="budda">

        <div data-role="header" data-position="fixed" style="
        display:block; 
        text-align:center; 
        background: url('21.png') no-repeat fixed;
        background-position: center bottom;
        background-size:100%,100%;
        color: #000000;
        height: 25%;">
            <h1>test</h1>
        </div><!-- /header -->

        <div data-role="content" style="
        display:block; 
        text-align:center; 
        background: url('23.png') no-repeat center center fixed;
        background-size:100%,100%;">
                <p>text</p>
        </div>

        <div data-role="footer" data-position="fixed" style="
        display:block; 
        text-align:center; 
        background: url('22.png') no-repeat fixed;
        background-position: center top;
        background-size:100%,100%;
        color: #000000;
        height: 25%;">
            <!--h4>text</h4-->
            <h4></h4>
            <h4></h4>
            <p><a href="#one" data-direction="reverse" data-role="button"
            data-style="round" id="btn"
            style="border: 5; background: #FFFFFF">
                back</a></p>
        </div><!-- /footer -->
    </div>

的CSS：

    /*PAGES*/

#one { 
    background: #FFFFFF;
    /*background: #06CF7B;*/
    color: #000000;
    font-family:"Times New Roman", Times, serif;
}
#budda { 
    background: #FFFFFF;
    /*background: #06CF7B;*/
    color: #000000;
    font-family:"Times New Roman", Times, serif;
}

Tizen - Web应用程序的标题未正确加载

0 个答案: