Wie die Anzeige laden der Seite Kennzeichen mit spin.js

Bin ich lernen, wie man Spin.js, so dass eine Ladeanzeige (spinner) kann gezeigt werden, während die Webseite geladen wird.

Ich es geschafft habe, aber ich bin nicht sicher, ob ich rufe die spin/Stopp-in der richtigen Seite-Lebenszyklus. Ist es möglich die spinner vor $(window).ready ?

<script type="text/javascript">
var spinner;

$(window).ready(function loadingAnimation() {
    var opts = {
      lines: 13, //The number of lines to draw
      length: 7, //The length of each line
      width: 4, //The line thickness
      radius: 10, //The radius of the inner circle
      corners: 1, //Corner roundness (0..1)
      rotate: 0, //The rotation offset
      color: '#000', //#rgb or #rrggbb
      speed: 1, //Rounds per second
      trail: 60, //Afterglow percentage
      shadow: false, //Whether to render a shadow
      hwaccel: false, //Whether to use hardware acceleration
      className: 'spinner', //The CSS class to assign to the spinner
      zIndex: 2e9, //The z-index (defaults to 2000000000)
      top: 'auto', //Top position relative to parent in px
      left: 'auto' //Left position relative to parent in px
    };
    var target = $("body")[0];
    spinner = new Spinner(opts).spin(target);
});

window.onload = function() {
    spinner.stop();
};

Zum Beispiel arbeiten, finden Sie http://sgratrace.appspot.com/industry.html

InformationsquelleAutor ruhong | 2013-03-14

Ich ein Objekt erstellt, um die Kontrolle der Spinnen:

Rats.UI.LoadAnimation = {
    "start" : function(){
        var opts = {
            lines : 13, //The number of lines to draw
            length : 7, //The length of each line
            width : 4, //The line thickness
            radius : 10, //The radius of the inner circle
            corners : 1, //Corner roundness (0..1)
            rotate : 0, //The rotation offset
            color : '#000', //#rgb or #rrggbb
            speed : 1, //Rounds per second
            trail : 60, //Afterglow percentage
            shadow : false, //Whether to render a shadow
            hwaccel : false, //Whether to use hardware acceleration
            className : 'spinner', //The CSS class to assign to the spinner
            zIndex : 2e9, //The z-index (defaults to 2000000000)
            top : $(window).height()/2.5, //Manual positioning in viewport
            left : "auto"
        };
        var target = $("body")[0];
        return new Spinner(opts).spin(target);
     },
     "stop" : function(spinner){
        spinner.stop();
     }
};

Wenn das DOM geladen ist, beginne ich zu Spinnen:

$(document).ready(function(){
        //Once the DOM is loaded, start spinning
        spinner = Rats.UI.LoadAnimation.start();

        pageUI();

});

Wenn die gesamte Seite geladen wird, höre ich auf zu Spinnen:

$(window).load(function(){
        //Once the page is fully loaded, stop spinning
        Rats.UI.LoadAnimation.stop(spinner);
});

Was ist der Unterschied zwischen Fenster.onload-vs $(document).ready()

Finden Sie den vollständigen code auf meinem github repo:

Können Sie mir bitte sagen, wie kann ich Rats.js Datei, und ich bin versucht, das gleiche zu tun in MVC, könnte Sie auch lassen Sie mich wissen, wenn etwas anderes getan werden muss, fügen Sie die Sache im Blick.
Hi Shivam, können Sie ihn hier github.com/seahrh/sgratrace/blob/master/war/js/rats.js
Haben Sie eine Lösung für MVC, ich arbeite auf MVC5 und suchen die Lösung in der gleichen. Danke.

InformationsquelleAutor ruhong

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.