2016-06-17 18 views
0

Ich habe einen Ajax Anruf, wo ich das Farbschema meiner Website bekomme. (Wir haben viele Kunden mit unterschiedlichen Schemata, deshalb müssen wir sie in der Datenbank speichern).Webseite laden nach AJAX abgeschlossen

Was ich erreichen möchte, ist warten auf den Ajax-Aufruf zu beenden, und nur danach, um etwas auf der Seite zu laden. Ich weiß, dass es eine kleine Verzögerung von ungefähr 1-2 Sekunden geben wird, aber es ist die einzige Möglichkeit, den Vorgang des Änderns der Farben der Text- und Hintergrundfarbe zu verbergen.

Vielen Dank!

+1

Es klingt mehr wie Sie das Farbschema auf dem Server erhalten sollten, bevor Sie die Seite bedienen. Auf diese Weise gibt es keine unnötige Verzögerung beim Rendern der Seite und weniger Anfragen an Ihren Server. –

+1

Sie könnten den gesamten Inhalt der Seite (mit Ausnahme einer Ladeanzeige) auf 'display: none' setzen. Bei der Rückkehr vom AJAX-Anruf zeigen Sie es. – Richard

+0

siehe diese [Frage] (http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done) Ich denke, das ist die beste Lösung –

Antwort

1

Sie können den Körper während des Ladens verstecken und zeigen Sie es nach dem Ajax-Anforderung abgeschlossen ist, wie dem folgenden Code:

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    </head> 
    <body> 
     <script> 
      document.getElementsByTagName('body')[0].setAttribute("style", "display: none"); //hide the body 
     </script> 
     <h1><a>Test</a></div> 
     <script> 
      $(document).ready(function() { 
       $.ajax({ 
        url: "your ajax url",, 
        success: function(result) { 
        $('h1 a').css('color', 'blue'); //process result here like changing the colors of the text and background color. 

        $('body').show(); 
        } 
       }); 
      }); 

     </script> 
    </body> 
</html> 
+0

Hallo. Das ist die Art, wie ich es gemacht habe und es funktioniert, es ist nur, dass ich weiß, dass es keine Best Practice ist und es vielleicht cleverere Wege gibt, es zu tun. – SimeriaIonut

+0

@SimeriaIonut ist Ihr Ajax gibt eine URL des Schemas zurück? –

+0

Nein, es gibt nur ein Objekt mit den Schlüsseln Primärfarbe, Sekundärfarbe und Tertiärfarbe und den Werten in Hex zurück – SimeriaIonut

0

Sie den Körper während des Ladens verstecken und zeigen Sie es nach dem Ajax-Anforderung wie der Abschluss Code unten:

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
     <script> 
      $(function() { 
       $.ajax({ 
        url: "your ajax url",, 
        success: function(result) { 

        }, 
        error:function() { 
        redirect to another page. 
        } 
       }); 
      }); 
     </script>    
    </head> 
    <body> 
     <h1><a>Test</a></div> 
    </body> 
</html>