Stai chiedendo informazioni su Caricamento pigro.
Bene, la risposta deve includere un lato server. La tua domanda non specifica quale tipo di lingua lato server stai usando. Nella mia risposta userò un codice PHP di base per deridere post di blog casuali.
caricamento lento significa che viene caricato solo ciò che l'utente può vedere e in seguito caricare più dati quando necessario.
caricamento dati significa - richiedendolo da un server. Questo di solito riguarda lo AJAX ma non necessariamente. (anche se probabilmente puoi usare AJAX). JQuery ha un meraviglioso ajax interface.
La domanda più grande è - cosa dovrebbe attivare il mio prossimo carico - quindi tutti i plugin.
Ho preso il consiglio di Tgr e implementato un carico pigro con i waypoint. Ho anche usato waypoint tutorial for lazy loading come suggerito da Tgr (dai a Tgr altri punti per favore).
Potete vedere il mio attuazione a my site
Quello che ho fatto è stato post del blog finte con la modifica del titolo. Ogni volta che l'utente scorre abbastanza, ricevo più messaggi dal server.
Ho aggiunto un collegamento per il download per la mia fonte in modo da poter scaricare e iniziare a giocare con esso. basta eseguire main.html e sei a posto.
Il file more_posts.php genera un post lorem ipsum con un titolo casuale. (Avevo bisogno di alcuni contenuti falsi per avere una pergamena sulla pagina).
Sembra che questo
<h1> This is post number <?php echo uniqid("",true)?> </h1>
<div style="color:red">
Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>
<div style="color:blue">
Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>
Come si può vedere l'unico codice PHP che ho è quello di aggiungere qualcosa di casuale al titolo.
Questo dovrebbe sembrarti familiare visto che hai già 25 post nel tuo blog.
La vera logica sta nel main.html - la parte HTML assomiglia in modo
<section id="container">
</section>
<footer>
<nav>
<ul>
<!-- Hijack this link for the infinite scroll -->
<li class="more"><a href="more_posts.php" title="Traditional navigation link">Next Page</a></li>
</ul>
</nav>
</footer>
L'idea è di avere section che contiene i primi posti - e ti dà un po 'di scorrimento nella pagina. In basso si ha un collegamento more all'interno di un footer, che quando JavaScript è disabilitato dovrebbe funzionare come un normale collegamento "successivo".
Waypoint utilizza questo collegamento per attivare il carico successivo. Ogni volta che il link sta per essere mostrato sullo schermo, useremo ajax per ottenere automaticamente il prossimo post.
Così la parte JavaScript assomiglia così:
$(document).ready(function() {
function loadMorePosts(callback){
$.get($('.more a').attr('href'), function(data) {
$('#container').append($(data));
if (typeof(callback) == "function"){ callback(); }
})
}
loadMorePosts();
var $footer = $('footer');
var opts = {
offset: '100%'
};
$footer.waypoint(function(event, direction) {
$footer.waypoint('remove');
loadMorePosts(function(){ $footer.waypoint(opts);});
}, opts);
});
la funzione loadMorePosts invoca il metodo $.get che è una sintassi più semplice per $.ajax({type:'GET' .. }). Utilizza lo stesso URL di cui ha l'attributo href del collegamento. Nel mio esempio l'attributo href punta a "more_posts.php".
Quando la mia demo viene caricata, il contenuto è completamente vuoto, quindi vado avanti e prelevo il primo post che voglio mostrare. Poi dico al waypoint di ascoltare sul footer - e ogni volta che il footer è vicino, vado a prendere più post.
C'è una parte difficile in cui faccio $footer.waypoint('remove') e passare un callback a loadMorePosts che lega nuovamente il waypoint al piè di pagina. Questo è solo un cavillo - waypoint è necessario rimuovere il grilletto mentre si recupera più HTML, altri la pagina potrebbe agire divertente ..
Questo è più o meno quello ..
Ho provato a fare questo come semplice possibile, ma è un grosso problema da trattare in una sola risposta. Quindi fammi sapere se posso fare di più per chiarire le cose.
Credo che questo articolo descrive quello che stai cercando: http://stackoverflow.com/questions/8192651/load-lazy-loading-a-div-whenever-the-div-gets-visible -per-la-prima- – Mossawi
Hai guardato http://www.infinite-scroll.com/ – Cyclonecode
hai guardato la mia risposta qui sotto? come funziona? – AddiktedDesign