Ist es möglich, Seiteninhalte mit Ajax/Jquery-Technik vorzuladen?

Ist es möglich, alle Seiteninhalte vorab zu laden (zB eine Ladezeile/animierte Grafik oder Ladetext), bis der Inhalt vollständig geladen ist und dem Benutzer/Besucher angezeigt wird? Wenn dies möglich ist, können Sie mir nur Anweisungen oder Ressourcen geben, um dies zu erreichen. Da ich in der Lage war, Bildpreloader einfach zu finden, suche ich nach einer Vorladetechnik, bei der alle Inhalte auf der Seite vorgeladen werden, bevor sie angezeigt werden.Ist es möglich, Seiteninhalte mit Ajax/Jquery-Technik vorzuladen?

Quelle

2009-04-08 Ahmad Fouad

Sie müssen Ajax dafür nicht verwenden. Legen Sie einfach den Wrapper div display der Seite auf none fest. Dann ändern Sie es in block, wenn das Dokument geladen ist.

Ihr Code könnte so aussehen, Vanille javascript:

<script type="text/javascript"> 
    function preloader() { 
     document.getElementById("preloader").style.display = "none"; 
     document.getElementById("container").style.display = "block"; 
    } 

    window.onload = preloader; 
</script> 

<style> 
div#wrapper { 
    display: none; 
} 

div#preloader {    
    top: 0; right: 10px; 
    position:absolute; 
    z-index:1000; 
    width: 132px; height: 38px; 
    background: url(path/to/preloaderBg.png) no-repeat; 
    cursor: wait; 
    text-shadow: 0px 1px 0px #fefefe; //webkit     
} 
</style> 

<body> 
    <div id="preloader">Loading... Please Wait.</div> 
    <div id="wrapper"> 
     <!-- page contents goes here --> 
    </div> 
</body>

aktualisieren, in jQuery:

<script type="text/javascript"> 
    // Use $(window).load(fn) if you need to load "all" page content including images, frames, etc. 
    $(document).ready(function(){ 
     $("#preloader").hide(); 
     $("#container").show(); 
    }); 
</script>

Verwandte Dokumente: Veranstaltungen/ready, Veranstaltungen/load, CSS/css & Kern/$

Quelle

2009-04-08 03:06:27 sepehr

div [id = "x"]? Sicher nur #x? – bobince

Das hat den Trick gemacht. Und es ist einfach. Wenn Sie Zeit haben, schreiben Sie bitte eine jQuery-Version; obwohl das gut funktioniert. –

@bobince Sicher das Gleiche! warum also? StackOverflow berücksichtigt die Anweisungen mit vorangestellten # Zeichen als Kommentar in einem Codeblock. benutze einfach #x. – sepehr

Ich habe etwas gemacht, wo ich wissen musste, wenn ein Bild vollständig geladen war, also habe ich das Preloading mit $.get() Funktion durchgeführt und eine Callback-Funktion als letzten Parameter übergeben. Auf diese Weise würde mein Rückruf ausgelöst, wenn das Bild tatsächlich heruntergeladen wurde, und ich würde wissen, dass der Browser das Bild bereits im Cache hatte.

Sie können eine Funktion schreiben, die eine globale Variable für jedes Bild hochzählt, das Sie zum Laden vorladen, und dann kann Ihr Callback den Zähler dekrementieren. Wenn der Zähler wieder auf Null steht, rufen Sie eine andere Funktion auf. Diese Funktion wird jetzt ausgelöst, sobald alle Bilder vorgeladen sind.

Dies ist für die Bilder. Alles andere kann garantiert geladen werden, wenn $ (document) .ready() ausgelöst wird. Also, wenn Sie Ihre Routine an diesem Punkt beginnen, sollte alles auf der Seite geladen werden.

Quelle

2009-04-08 02:24:41 Rich

Wenn Sie eine Methode wählen, bei der der Inhalt verborgen bleibt, bis die ganze Seite geladen ist, lassen Sie ihn zunächst in CSS verborgen und dann in JavaScript wieder einblenden. Wenn Sie das tun, erhält jeder, der JavaScript deaktiviert oder nicht verfügbar ist, überhaupt keine Seite. Führen Sie stattdessen sowohl das Verstecken als auch das Zeigen aus dem Skript aus.

<body> 
    <script type="text/javascript"> 
     document.body.style.visibility= 'hidden'; 
     window.onload= function() { document.body.style.visibility= 'visible'; }; 
    </script>

Beachten Sie auch, dass der Begriff ‚Preloader‘ für nicht wirklich richtig ist, was Sie hier tun. 'Pre' bedeutet, dass Sie die Leistung erhöhen, indem Sie die Seite abrufen und zwischenspeichern, sodass sie zur gewünschten Zeit bereit ist.

Aber eigentlich ist das Gegenteil: es sinkt Leistung durch Warten um den Benutzer nichts zeigen, während die Seite geladen wird, wenn teilweise Inhalt verfügbar ist. Durch das Beseitigen des progressiven Renderings wird das Durchsuchen langsamer und nicht schneller. Es ist normalerweise eindeutig das Falsche Ding, und außer in einigen Nischenfällen, die mit dem normalen Browser gehen, ist das progressive Rendering am besten. So funktioniert das Web; die Leute sind mittlerweile daran gewöhnt.

(Menschen, das heißt, mit Ausnahme der Art dümmliche Management-Typen, die verwenden oder nicht wirklich verstehen, die Bahn aber verlangen, dass Website ihres Unternehmens auf einmal angezeigt.)

Quelle

2009-04-08 09:28:08 bobince

Sie können es tun mit jquery leicht.

SCRIPT


$(window).load(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

STYLES


div#preloader { 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; 
}

HTML

 
div id="preloader"

Quelle

2010-11-15 08:14:56

Der beste Weg

 
function ajax(){ 
$('#wapal').html('path to image'); 
$.ajax({ 
     url:'somfile.php', 
     method:'get', 
     success:function(data){ 
     if(data =='') return; 
     $('#wapal').html(data); 
     } 
    }); 
}

Quelle

2011-01-13 12:43:05

Einige Änderungen an DMus-Jerad Antwort, da es nicht funktioniert, wenn sich adsense auf der Seite befindet.

Sie können es einfach mit jquery tun.

SCRIPT

$(document).ready(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

STYLES

div#preloader { 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; 
}

HTML

div id="preloader"

Quelle

2012-06-23 13:23:07 tamal3053

Ist es möglich, Seiteninhalte mit Ajax/Jquery-Technik vorzuladen?

Antwort

Verwandte Themen