HTML importieren: Seite blinkt kurz

C

chpo7234

New member
Hallo Leute,

ich habe auf meinen verschiedenen HTML-Seiten immer das gleiche Menü. Um Redundanz zu vermeiden habe ich das Menü in eine eigene Datei ausgelagert und lade diese mittels Ajax. Das Problem ist nur, dass die Seiten oftmals kurz blinken, weil erst das HTML angezeigt wird und dann der Nachschub mittels Ajax kommt.

Datei menuloader.js
Code: 
$.ajax({
  url:"menu.html",
  dataType:"text"
}).done(
  function(data){
    $('#menu').html(data);
 });

Muster-Inhalt meiner .HTML-Seiten
Code: 
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="scripts/menuloader.js" type="text/javascript"></script>
  </head>

  <body>
    <div id = "menu"></div>
  </body>
</html>

Hat jemand einen Vorschlag, wie man das Ganze effizienter gestalten könnte?
Gibt es für mein Vorhaben vielleicht einen besseren Lösungsweg - abseits von Ajax?
Oder sollte ich gar nicht erst auf die Idee kommen, das Menü auszulagern, weil das aus bestimmten Gründen nicht zweckmässig wäre?

Lieben Gruß
 
Zuletzt bearbeitet:
also ich würd dafür load() von jquery benutzen und das auch erst ausführen wenn document.ready();
 
Das würde das Blinken aber verstärken (auch wenn es der richtige Weg ist, da man sonst nicht sicherstellen kann, dass #menu auch wirklich existiert).

Mein Weg würde ja über den Server gehen. D.h. du baust dein HTML dort dynamisch zusammen (z.B. mit PHP). Dann musst du dein Menü nicht für jede Seite einzeln warten, deine Seite blinkt nicht und es funktioniert auch, wenn JS deaktiviert ist.

Ein anderer Weg wäre, dass du deine Seite gleich am Anfang komplett ausblendest (z.B. mit document.body.style.display = "none"; in einem <script> direkt hinter dem öffnenden <body>) und erst wieder einblendest, wenn das Menü geladen wurde.
 
Hallo,

wie kann ich mir deinen ersten Vorschlag vorstellen, kkapsner? Soll ich einfach eine .php-Datei auslagern und das Menü in dieser mittels echo-Befehl erzeugen?
 
Nein. Du kannst deine menu.html so lassen, wie sie ist. Du musst deine anderen Seite so ändern, dass sie vom PHP-Parser bearbeitet werden (am einfachsten geht das meistens, indem du ihnen die Dateiendung .php gibst) und dann an der Stelle, wo das Menü erscheinen soll fügst du ein
Code: 
<?php include("menu.html");?>
ein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben