IBM Worklight 6.0 - 在加载框架库和 css 时,在混合应用程序(使用 Dojo 工具包 1.9)中获得了明显的亮点?

Posted

技术标签:

【中文标题】IBM Worklight 6.0 - 在加载框架库和 css 时,在混合应用程序(使用 Dojo 工具包 1.9)中获得了明显的亮点?【英文标题】:IBM Worklight 6.0 - Gets a noticeable blip in hybrid application(used Dojo toolkit 1.9) while loading the framework libraries and css? 【发布时间】:2013-07-18 05:26:16 【问题描述】:

当页面在应用程序中加载时,加载框架库和 CSS 需要几秒钟,并且我得到一个明显的 blip。如何防止这种情况发生?

我曾在运行 os 版本 2.2 的 android 虚拟设备上进行过尝试。我也在运行 4.1 版操作系统的实际设备上尝试过。

.html 文件:

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>Accordfintech</title>
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            <link rel="stylesheet" href="css/Accordfintech.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
            <script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
            <style>
            .col_Mmargin:5px 7px 0 7px;
            </style>
        </head>
        
        <body id="content" style="display: none;">
        <div data-dojo-type="dojox.mobile.Heading"
            data-dojo-props="label:'Accord Fintech'" style="background-color: #10537b; color: black">
        <img src="images/Accord.png" align="left" style="margin: 8px 0px 0px 8px">
        </div>
        <div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
        <div data-dojo-type="dojox.mobile.RoundRectList">
            <div data-dojo-type="dojox.mobile.ListItem"
                data-dojo-props="label:'About Us',moveTo:'abview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/about_us.png"></div>
            <div data-dojo-type="dojox.mobile.ListItem"
                data-dojo-props="label:'Software',moveTo:'swview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/software_icon.png"></div>
            <div data-dojo-type="dojox.mobile.ListItem"
                data-dojo-props="label:'Database',moveTo:'dbview',transition:'flip',dir:'1'" style="background-color: #00bcf2" icon="images/Database_icon.png"></div>
            <div data-dojo-type="dojox.mobile.ListItem"
                data-dojo-props="label:'Products',moveTo:'prview',transition:'flip',dir:'1'" style="background-color: #00bcf2" icon="images/products_icon.png"></div>
            <div data-dojo-type="dojox.mobile.ListItem"
                data-dojo-props="label:'Research',moveTo:'resview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/Research_icon.png"></div>
            <div data-dojo-type="dojox.mobile.ListItem"
                data-dojo-props="label:'Contact Us',moveTo:'cuview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/Contact_us.png"></div>
        </div>
    </div>
    <div data-dojo-type="dojox.mobile.ScrollableView" id="abview">
        <div data-dojo-type="dojox.mobile.Heading" fixed="top"
            data-dojo-props="label:'About Us',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
        <div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
        <p><strong>Accord Fintech Pvt. Ltd.</strong> is an ISO 9001:2008 certified company, set up by a team of professionals with competencies in Financial content, software development and database design using a variety of platforms, technologies and financial domain knowledge.</p>
        </div>
    </div>
    <div data-dojo-type="dojox.mobile.ScrollableView" id="swview">
        <div data-dojo-type="dojox.mobile.Heading" fixed="top"
            data-dojo-props="label:'Software',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
        <div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
        <p>We can offer you a typically 'made - to - order' solution, based on your requirements.</p>
        <p>We are well versed with website development, intranet and extranet solutions.</p>
        </div>
    </div>
    <div data-dojo-type="dojox.mobile.ScrollableView" id="dbview">
        <div data-dojo-type="dojox.mobile.Heading" fixed="top"
            data-dojo-props="label:'Database',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
        <div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
        <p>The Database of Accord Fintech is the absolute solution for all financial analysis requirements, comprising listed companies traded on India's major stock exchanges.</p>
        </div>
    </div>

    
    <div data-dojo-type="dojox.mobile.ScrollableView" id="prview">
        <div data-dojo-type="dojox.mobile.Heading" fixed="top"
            data-dojo-props="label:'Products',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
        <div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
        <p><strong>ACCORD</strong> offers a wide range of products and solutions designed specially for enterprises and small businesses across a variety of industries. 
        </div>
    </div>
    <div data-dojo-type="dojox.mobile.ScrollableView" id="resview">
        <div data-dojo-type="dojox.mobile.Heading" fixed="top"
            data-dojo-props="label:'Research',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
        <div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
        <p>We are a professionally managed growing research house providing intelligence on every aspect of Indian business, finance and markets.</p>
        </div>
    </div>
    <div data-dojo-type="dojox.mobile.ScrollableView" id="cuview">
        <div data-dojo-type="dojox.mobile.Heading" fixed="top"
            data-dojo-props="label:'Contact Us',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
        <div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
        <p><strong>Customer Support contacts:</strong></p><br/>
        </div>
        </div>
            <script src="js/initOptions.js"></script>
            <script src="js/Accordfintech.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

快照:

闪屏后显示内部内容:

完全加载包和css文件后:

但是这种情况只发生几秒钟,但我怎样才能避免这种情况呢?

【问题讨论】:

【参考方案1】:

您是否在您的身体元素上添加了“可见性:隐藏”?您需要放置它(并删除某些工作灯版本正在添加的“display: none”),Dojo Mobile 将确保在准备好显示屏幕时将其删除。

【讨论】:

以上是关于IBM Worklight 6.0 - 在加载框架库和 css 时,在混合应用程序(使用 Dojo 工具包 1.9)中获得了明显的亮点?的主要内容,如果未能解决你的问题,请参考以下文章

IBM Worklight 6.0 - 添加 Worklight 文件条目选项时遇到问题

IBM Worklight 6.0 - 访问 Worklight Server 时出错

IBM Worklight 6.0 - 在以下期间发生内部错误:Worklight 应用程序构建器

IBM Worklight 6.0 - 无法访问 Worklight 服务器

IBM Worklight 6.0 - 内容根目录和本地 Worklight 服务器设置

IBM Worklight 6.0 - 移动浏览器模拟器是不是支持 Worklight 皮肤?