Elemente ausblenden, bis die Seite fertig geladen ist - mit jquery

Ich hab schreiben Sie einfach eine Toten-einfachen code zu verstecken alle Elemente, bis die Seite fertig geladen ist und das display eine Anzeige beim laden.. (Es funktioniert).

also, was ich verlange, ist, zu wissen, wenn ich es richtig machen und was Sie zu schlagen.

HTML

<body>
    <div class="loading">
        <img src="indicator.gif"/>
    </div>

    <div class="content">
        <!-- page content goes here --> 
    </div>
</body>

jquery

$(document).ready(function(){
        $(".content").hide();
     });

    $(window).load(function(){
        $(".loading").fadeOut("slow");
        $(".content").fadeIn("slow");
     });
InformationsquelleAutor Sam | 2011-09-13
  1. 14

    Werden Sie wahrscheinlich wollen, um zu verbergen das content div von der start-zur Vermeidung möglicher Seite flackern, je nachdem, was auf der Seite geladen.

    <body>
  <div class="loading">
    <img src="indicator.gif"/>
  </div>

  <div class="content" style="display: none;">
    <!-- page content goes here --> 
  </div>
</body>


$(window).load(function(){
  $(".loading").fadeOut("slow");
  $(".content").fadeIn("slow");
});
    • guter Fang! die Sinn machen.
    InformationsquelleAutor njr101
  2. 6

    Eine leichte Verbesserung auf dieses Javascript zu verwenden, der einen Rückruf auf dem fadeout also der fade-in gestartet wird, wenn der fadeout abgeschlossen hat. Dies gibt Ihnen einen viel sanfteren übergang.

    <body>
  <div class="loading">
    <img src="indicator.gif"/>
  </div>

  <div class="content" style="display: none;">
    <!-- page content goes here --> 
  </div>
</body>


$(window).load(function(){
  $(".loading").fadeOut("slow", function(){
    $(".content").fadeIn("slow");
  });
});
    InformationsquelleAutor nidal
Schreibe einen Kommentar