Alles ausblenden, bis die Seite fertig geladen ist

Ich suche nach allem, was auf meiner Seite versteckt ist, bis die Seite fertig geladen ist. Ich habe viele Beiträge gesehen und verschiedene Dinge ausprobiert. Die häufigste Lösung, die großen Werke istAlles ausblenden, bis die Seite fertig geladen ist

<body style="display:none;">

Dann jQuery führen Sie es zu zeigen, wieder auf Fenster Last

$(window).load(function() { 
    $("body").fadeIn("slow"); 
});

Ich habe ein Problem mit diesem, wie die Seite angewiesen ist auf JS, etwas zu zeigen, überhaupt. Ich schätze das ist eine seltene Sache, aber fühlt sich einfach falsch an.

Im Idealfall würde Ich mag jQuery verwenden, um die Anzeige hinzuzufügen: keine CSS als auch

aber ...

Das Problem ist, wenn ich hinzufüge

$(document).ready(function { 
    $(body).css('display', 'none'); 
});

Auch dauert das eine Weile zu laufen und die Seite flackert mit Inhalt vor der Hand.

Gibt es einen besseren Weg?

Kann ich das Skript ohne document.ready (versucht, aber didn; t Arbeit)

Dank.

Quelle

2014-02-28 Pete Norris

zeigen Sie dies: http://www.inwebson.com/demo/jpreloader-v2/ – caramba

http://stackoverflow.com/a/3629799/3058754 –

Versuchen Sie, die JS direkt nach '' und ohne jQuery (das erfordert jQuery zuerst laden) zu setzen. –

Versuchen Sie, diese

$('#domelement').css('opacity', 0); 
    $(window).load(function() { 
     $('#domelement').css('opacity', 1); 
    });

„DOMElement“ mit dem Wähler des DOM-Elements ersetzen (n) geladen, bis

Quelle

2014-02-28 12:44:53 CodeFanatic

ausblenden möchten Wenn ich es zu tun haben, dann würde ich es auf diese Weise tun :

in der CSS ich den Körper verstecken würde:

body{ display:none; }

dann mit jQuery:

$(window).load(function() { 
    $("body").fadeIn("slow"); 
});

Obwohl Sie gebucht haben dies:

$(document).ready(function() { 
    $(body).css('display', 'none'); // $(body) is missing the quotes 
});

Sie können dies versuchen:

$(document).ready(function() { 
    $('body').hide(); 
});

Quelle

2014-02-28 12:45:08 Jai

es zu verbergen Javascript verwenden, setzen Sie Skript nur nach BODY-Tag Erklärung:

<body> 
    <script>document.body.style.display = "none";</script>

Auf diese Weise, wenn JavaScript deaktiviert ist, wird BODY immer noch angezeigt

Quelle

2014-02-28 12:45:52

Versuchen Sie dieses Beispiel.http://jsfiddle.net/iashu/AaDeF/

<div id="loading"></div> 

<div id="container"> 
    container content.... 
</div>

JQuery

$(window).load(function() { 
    //show(); 
}); 


function show() { 
    $('#loading').hide(); 
    $('#container').fadeIn(); 
}; 

setTimeout(show, 3000);

Quelle

2014-02-28 12:47:25

Der Ansatz, den ich es verwenden, um eine js Klasse und eine hidden-until-ready Klasse zu haben. Meine ausgeblendeten bis zur fertigen Vorlage werden nur angewendet, wenn es eine Klasse js gibt.

beispiel

.js .hidden-until-ready { 
    visibility: hidden; 
}

die js Klasse am Start angewandt wird, wenn JavaScript aktiviert ist.

document.documentElement.className = document.documentElement.className + ' js';

dann in jQuery entferne ich die hidden-until-ready, sobald die Seite geladen wurde.

jQuery(document).ready(function() { 
    jQuery('.hidden-until-ready').removeClass('hidden-until-ready'); 
});

diese Weise die Elemente der Seite sind nur am Anfang ausgeblendet, wenn JavaScript aktiviert ist und sobald die Seite die Elemente wieder sichtbar geladen ist.

Quelle

2014-02-28 12:48:37

ich tun würde, die folgende

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script> 
<style> 
     .hidden { 
      display: none; 
     } 
    </style> 
</head> 
<body class="hidden"> 
    this is the body... 



    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("body").removeClass('hidden'); 
     }); 
    </script> 
</body> 
</html>

es also in der Kopfzeile in Inline-CSS verstecken (so wird es sofort in Kraft und nicht die Latenz von Abrufen einer externen Datei leiden), schwelgen sie dann in Javascript. Hinweis: Dies ist keine Best Practice mit Inline-CSS und JS, aber sollte Ihnen die geringste Latenzzeit geben und daher keinen Blitz der Sichtbarkeit haben.

Quelle

2014-02-28 12:53:10 LDJ

Geben Sie class to body und setzen Sie ihre CSS auf "display: none"; Dann den Code zu setzen, bevor „body“ -Tag

$(document).ready(function { 
    $('#bodyOuter').show(); 
});

So wird es ausgeblendet werden und nach dem Laden der Seite wird es

Quelle

2014-02-28 12:56:40

Flicker gezeigt werden Sie da erwähnt wird, kommt durch die Zeit jquery den Körper versteckt, Browser hätte begonnen, das Dom zu malen. Bessere Lösung ist es, es mit CSS zu verstecken, die nichts zeigen sollte, während die Seite geladen wird, dann können Sie Körper in jquery.load()

Quelle

2017-07-23 17:03:14

Alles ausblenden, bis die Seite fertig geladen ist

Antwort

Verwandte Themen