如何延长闪屏WinJS的时间

时间:2014-02-08 00:48:37

标签: winjs splash-screen

我有一个带有启动画面的WinJS应用程序,因为我们知道它持续一段时间, 我们假设三秒钟, 我该怎么办才能让它持续五秒钟呢?


编辑:要分享我的代码

.HTML:刚刚将此代码添加到我的隐藏我的内容div或主div中,添加了“隐藏”属性

<script src="js/extendedSplash.js"></script>

<!--        SPLASH SCREEN DIV-->
    <div id="extendedSplashScreen" class="extendedSplashScreen hidden">
        <img id="extendedSplashImage" src="images/splashscreen.png" alt="Splash screen image" />
            <progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
    </div>
<!--        END SPLASH SCREEN DIV-->

.CSS文件:将下一个代码添加到样式表文件

/*SPLASH SCREEN FORMAT*/
.extendedSplashScreen {
    background-color:#ea0000;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.extendedSplashScreen.hidden {
    display: none;
}

#extendedSplashImage {
    position: absolute;
}

#extendedSplashDescription
{
    position: absolute;
    width: 100%;
    top: calc(100% - 140px);
    text-align: center;
}

#extendedSplashText
{
    font-family: 'Segoe UI Semilight';
    font-size: 11pt;
    text-align: center;
    width: 75%;
    color: #ffffff;
}
/*END SPLASH SCREEN FORMAT*/

.JS档案 创建一个JS文件(extendedSplash.js)

(function () {
    "use strict";
    var splash      = null;  // Variable to hold the splash screen object.
    var dismissed   = false; // Variable to track splash screen dismissal status.
    var coordinates = { x: 0, y: 0, width: 0, height: 0 }; // Object to store splash screen image coordinates. It will be initialized during activation.

    function loadSplashScreen(args) {
        // Retrieve splash screen object
        splash = args.detail.splashScreen;

        // Listen for window resize events to reposition the extended splash screen image accordingly.
        // This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
        window.addEventListener("resize", onResize, false);

        // Retrieve the window coordinates of the splash screen image.
        coordinates = splash.imageLocation;

        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

        // Create and display the extended splash screen using the splash screen object.
        show(splash);

        // Listen for window resize events to reposition the extended splash screen image accordingly.
        // This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
        window.addEventListener("resize", onResize, false);
    }


    // Displays the extended splash screen. Pass the splash screen object retrieved during activation.
    function show(splash) {
        var extendedSplashImage = document.getElementById("extendedSplashImage");

        // Position the extended splash screen image in the same location as the system splash screen image.
        extendedSplashImage.style.top       = splash.imageLocation.y        + "px";
        extendedSplashImage.style.left      = splash.imageLocation.x        + "px";
        extendedSplashImage.style.height    = splash.imageLocation.height   + "px";
        extendedSplashImage.style.width     = splash.imageLocation.width    + "px";

        // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
        /*
        var extendedSplashProgress = document.getElementById("extendedSplashProgress");
        extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
        */

        // Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible.
        var extendedSplashScreen = document.getElementById("extendedSplashScreen");
        WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
    }

    // Updates the location of the extended splash screen image. Should be used to respond to window size changes.
    function updateImageLocation(splash) {
        if (isVisible()) {
            var extendedSplashImage = document.getElementById("extendedSplashImage");

            // Position the extended splash screen image in the same location as the system splash screen image.
            extendedSplashImage.style.top       = splash.imageLocation.y        + "px";
            extendedSplashImage.style.left      = splash.imageLocation.x        + "px";
            extendedSplashImage.style.height    = splash.imageLocation.height   + "px";
            extendedSplashImage.style.width     = splash.imageLocation.width    + "px";

            // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
            /*
            var extendedSplashProgress = document.getElementById("extendedSplashProgress");
            extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
            */
        }
    }

    // Checks whether the extended splash screen is visible and returns a boolean.
    function isVisible() {
        var extendedSplashScreen = document.getElementById("extendedSplashScreen");
        return !(WinJS.Utilities.hasClass(extendedSplashScreen, "hidden"));
    }

    // Removes the extended splash screen if it is currently visible.
    function remove() {
        if (isVisible()) {
            var extendedSplashScreen = document.getElementById("extendedSplashScreen");
            WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
        }
    }

    function onResize() {
        // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
        if (splash) {
            // Update the coordinates of the splash screen image.
            coordinates = splash.imageLocation;
            updateImageLocation(splash);
        }
    }

    function onSplashScreenDismissed() {
        // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
        dismissed = true;

        // Tear down the app's extended splash screen after completing setup operations here...
        // In this sample, the extended splash screen is torn down when the "Learn More" button is clicked.
        //document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false);
    }

    //namespace created for accessing to certain methods created inside this JS file from external JS
    WinJS.Namespace.define("ExtendedSplash", {
        isVisible:          isVisible,
        remove:             remove,
        loadSplashScreen:   loadSplashScreen
    });
})();
在default.js中

查找函数或

部分
  

args.detail.kind === activation.ActivationKind.launch

并添加此

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            ExtendedSplash.loadSplashScreen(args);                                  //loads extended splash screen

            // Use setPromise to indicate to the system that the splash screen must not be torn down
            // until after processAll and navigate complete asynchronously.
            args.setPromise(WinJS.UI.processAll().then(function(){
                setTimeout(function () {
                    ExtendedSplash.remove();                                        //removes splash screen
                    document.getElementById("content").removeAttribute("hidden");   //shows main screen (content and footer)
                    document.getElementById("footer").removeAttribute("hidden");
                }, 4000);
            }));

}

在我的情况下,我添加了4秒的延迟,然后我隐藏了我的splashScreen

  

ExtendedSplash.remove();

然后我展示了我的两个主要Div(内容和页脚)

  

的document.getElementById( “内容”)的removeAttribute( “隐藏”);。
  //显示主屏幕(内容和页脚)                           的document.getElementById( “页脚”)的removeAttribute( “隐藏”);

1 个答案:

答案 0 :(得分:2)

这很简单......你只需创建一个页面,当你的飞溅被取下时,你首先显示的页面就像你的闪屏一样。

完整记录here