È possibile precaricare il contenuto della pagina con la tecnica ajax/jquery?

E 'possibile precaricare tutto il contenuto della pagina (come mostrare una barra di caricamento/gif animata ... o caricare il testo ..) fino a quando i contenuti non sono completamente caricati e quindi visualizzati all'utente/visitatore? Se questo è possibile, puoi darmi solo indicazioni o risorse da seguire per raggiungere questo obiettivo. Perché sono stato in grado di trovare facilmente i precaricatori di immagini, ma sto cercando una tecnica di precaricamento che precarichi tutti i contenuti della pagina prima di essere visualizzata.È possibile precaricare il contenuto della pagina con la tecnica ajax/jquery?

fonte

2009-04-08 Ahmad Fouad

Per questo non è necessario utilizzare Ajax. Basta impostare il wrapper della pagina display a none. Quindi modificarlo in block quando viene caricato il documento .

Il codice potrebbe essere simile a questo, con la vaniglia 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>

aggiornamento, 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>

Documenti correlati: Eventi/ready, Eventi/load, CSS/css & Core/$

fonte

2009-04-08 03:06:27 sepehr

div [id = "x"]? Sicuramente solo #x? – bobince

Questo ha fatto il trucco. Ed è semplice Se hai tempo, per favore scrivi una versione di jQuery; anche se questo funziona bene. –

@bobince Certo lo stesso! quindi perché? StackOverflow considera le istruzioni con i precedenti caratteri # come commento in un blocco di codice. usa semplicemente #x. – sepehr

Ho fatto qualcosa in cui dovevo sapere quando un'immagine è stata caricata completamente, quindi ho eseguito il preloading con la funzione $.get() e ho passato una funzione di callback come ultimo parametro. In questo modo, quando l'immagine è stata effettivamente scaricata, il mio callback si attiva e vorrei sapere che il browser aveva già l'immagine nella cache.

È possibile scrivere una funzione che incrementa una variabile globale per ogni immagine che si dice di precaricare, e quindi la richiamata può decrementare il contatore. Quando il contatore torna a zero, chiama un'altra funzione. Questa funzione ora si attiva quando tutte le immagini sono state caricate.

Questo è per le immagini. Tutto il resto può essere garantito per essere caricato quando viene attivato $ (document) .ready(). Quindi, se inizi la tua routine a questo punto, tutto dovrebbe essere caricato nella pagina.

fonte

2009-04-08 02:24:41 Rich

Se si sceglie un metodo in cui il contenuto è nascosto fino a quando non viene caricata l'intera pagina, non è necessario nasconderla inizialmente in CSS, quindi non essere visibile in JavaScript. Se lo fai, chiunque abbia JavaScript disabilitato o non disponibile non riceverà alcuna pagina. Invece, fai sia il nascondiglio che la proiezione dalla sceneggiatura.

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

Si noti inoltre che il termine ‘preloader’ non è davvero giusto per quello che stai facendo qui. 'Pre' implica che stai aumentando le prestazioni facendo caricare la pagina e memorizzandoti nella cache in modo che sia pronta per andare prima che sia necessario.

In realtà questo è il contrario: diminuisce prestazioni attesa intorno mostrando nulla utente durante il caricamento della pagina, quando il contenuto parziale è disponibile. La sconfitta del rendering progressivo rende la navigazione più lenta, non più veloce. Di solito è chiaramente la cosa sbagliata, e salvo in alcuni casi di nicchia che vanno con il normale rendering progressivo del browser è la cosa migliore. Questo è come funziona il web; le persone sono abituate ormai.

(persone, vale a dire, tranne che per il tipo di tipi di gestione ottuso, che in realtà non usare o capire il web, ma la domanda che il sito della propria azienda sembra tutto in una volta.)

fonte

2009-04-08 09:28:08 bobince

Si può fare con jquery facilmente.

SCRIPT


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

STILI


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"

fonte

2010-11-15 08:14:56

Il modo migliore

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

fonte

2011-01-13 12:43:05

Alcune modifiche a DMus -Jerad Risposta in quanto non funziona quando nella pagina è presente adsense.

È possibile farlo facilmente con jquery.

SCRIPT

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

STILI

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"

fonte

2012-06-23 13:23:07 tamal3053

È possibile precaricare il contenuto della pagina con la tecnica ajax/jquery?

risposta

Problemi correlati