La pagina viene caricata mentre scorri. Fammi girare completamente

Ciao a tutti. Oggi voglio parlarti di come organizzare il lazy load dei contenuti sulle landing page.

Spesso viene anche chiamato “ scorrimento infinito" Probabilmente hai notato un effetto simile quando il contenuto non è inizialmente presente sul sito, ma mentre scorri la pagina viene caricato senza problemi.

Molto tempo fa abbiamo scritto alla sezione "I tuoi suggerimenti" chiedendo di scrivere un articolo su come implementare un tale effetto:

Quindi ho deciso di iniziare a implementarlo. Grazie per avermi dato delle idee. Iniziamo...

Come nella maggior parte dei casi, iniziamo includendo la libreria jQuery:

Ora dobbiamo divagare un po 'e ti spiegherò l'essenza del metodo. Tutto questo viene avviato per non caricare tutti gli elementi del sito (il tuo portfolio o recensioni), ma per caricarli secondo necessità. Ad esempio, quando l'utente fa clic sul pulsante "Mostra altro". In questo modo la pagina verrà caricata molto più velocemente. E ora il punto è usare tecnologie ajax caricheremo elemento richiesto(div) e file di terze parti alla nostra pagina di destinazione. Tutto è così semplice, sia in teoria che in pratica, e lo vedrai presto.

Ora creiamo un blocco principale, ad esempio, con le immagini dei nostri lavori. Supponiamo di disegnare icone e di caricarle quando si fa clic su un pulsante. Ho creato questa struttura:

Portafoglio Mostra di più...

Come puoi vedere, tutto è semplice. Ma a cosa dovresti prestare attenzione? E devi prestare attenzione ai div con id="smartPortfolio", id="moreButton" e id="loadingDiv", poiché vengono utilizzati nello script, che ci aiuta a caricare il contenuto da altre pagine. SmartPortfolio è un “contenitore” del nostro portafoglio. MoreButton: questo sarà il nostro pulsante, quando cliccato verrà caricata un'altra parte del portfolio. LoadingDiv - l'area in cui verrà visualizzato il testo quando il portafoglio è completamente aperto o si verifica qualche errore.

Ad esempio, alcuni lettori proveranno comunque a testare questo script non sul server, ma apriranno semplicemente il file indice nel browser. In tal caso, vedranno un messaggio di errore. Inoltre, se la connessione è molto lenta, potrebbe essere necessario del tempo per scaricare i file e, affinché l'utente capisca che il processo è in corso, è possibile inserire un messaggio lì caricamento dati o luogo (immagine, indicatore di avanzamento o qualcos'altro).

Non ho scritto lo script in sé, ma l'ho trovato su uno dei siti, l'autore è elencato nel codice sorgente, se sei interessato, dai un'occhiata. Dal momento che non lo è anche lui grande taglia, allora darò tutto, ma se prevedi di utilizzare gli stessi nomi ID e percorsi di file dei miei, non devi nemmeno guardarlo, ma semplicemente collegarlo prima di chiudere etichetta del corpo(nel piè di pagina).

Per coloro che intendono apportare modifiche, ecco lo script stesso:

Var lazyload = lazyload || (); (function($, lazyload) ( "usa strict"; var page = 2, buttonId = "#moreButton", loadId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + pagina + ".html"; $(buttonId).hide(); $(loadingId).show(( url: url, successo: funzione(risposta) ( if (); !response ||. Response.trim() == "NESSUNO") ( $(buttonId).fadeOut(); $(loadingId).text("Portafoglio completamente caricato"); return; ) appendContests(response): function(); risposta) ( $(loadingId).text("Siamo spiacenti, si è verificato un errore con la richiesta. Aggiorna la pagina."); ) )); $(buttonId).show(); ).appendTo($(contenitore));

Quindi ora vale la pena parlare dei file da cui caricheremo le informazioni. Lo script presuppone che questi siano file con nomi 2.html...5.html, ecc. Che contiene le nostre informazioni. Ad esempio, il primo file che carico è 2.html e ha il seguente contenuto:

Nella struttura del mio sito, le pagine da cui verranno prelevate le informazioni per il successivo caricamento quando cliccate si trovano nella cartella pagine. Sono presenti tre file, due dei quali pieni e l'ultimo vuoto. Questo è ciò che presuppone la logica dello script.

Il percorso nello script è specificato come segue:

Var url = "./pages/" + pagina + ".html";

Se prevedi di utilizzare un percorso diverso, assicurati di sostituirlo nello script. Inoltre, se hai utilizzato altri ID, questi dovranno essere ridefiniti nello script. Giusto qui:

ButtonId = "#moreButton", loadId = "#loadingDiv", contenitore = "#smartPortfolio";

E, come ho già detto, prima del tag body di chiusura includiamo lo script stesso:

Così su pagina di destinazione Puoi implementare il caricamento lento. Inviaci altri argomenti sui quali vorresti leggere un articolo sul blog. Cercherò, per quanto possibile, di pubblicare non il materiale previsto, ma quello che mi chiedi nella sezione “I tuoi suggerimenti”. E questo è tutto per oggi. Ciao!

Sabbiera

recluta 9 febbraio 2013 alle 21:42 Fammi girare completamente. Layout reattivo con scorrimento infinito

• Ripostiglio *

Non molto tempo fa mi sono imbattuto in un problema:
- Layout del layout adattivo. Quando si ridimensiona una finestra, gli elementi sulla pagina vengono ridimensionati fino a una determinata larghezza. Se la larghezza è inferiore al minimo, il numero di elementi in una riga diminuisce, riempiendo allo stesso tempo l'intero schermo in larghezza. Il significato è chiaro: la pagina dovrebbe essere visualizzata su qualsiasi monitor, incl. sui dispositivi mobili.
- Il contenuto viene caricato durante lo scorrimento della pagina, quindi viene visualizzata solo una parte del contenuto, il resto viene caricato mentre si scorre verso il basso (analogamente a un muro VK).
- L'aspetto degli elementi sulla pagina avviene a turno, con un aumento graduale della trasparenza di ciascun elemento. Dopo che il primo elemento è diventato opaco, viene applicato l'effetto elemento successivo...e così via per tutti.

Non sono riuscito a trovare una soluzione già pronta; ho dovuto scrivere tutto da zero. Forse tutta questa funzionalità è inutile, ma se all'improvviso torna utile a qualcuno, usala, provala, divertiti:

HTML. Per i test, ho messo insieme rapidamente un layout molto semplice. Per non preoccuparmi degli stili per molto tempo, ho collegato il bootstrap. Ecco il markup:
Ciao mondo! // In linea di principio, puoi inizializzare la classe non qui e senza parametri. Ne parleremo più avanti. // contenitore in cui vengono visualizzati tutti gli elementi. // Nel nostro caso, ogni elemento lo è elemento separato Sulla pagina. Ne faremo uscire molti.

// ... molti, molti articoli // Facciamo le pulizie, perché il nostro articolo ha float: left
CSS. Tutto qui è semplicemente scandaloso. Bootstrap connesso, imposta diversi stili per il contenuto e il gioco è fatto!

@import url("bootstrap.css"); corpo ( sfondo: #000; ) sezione.container ( posizione: assoluta; superiore: 50px; inferiore: 50px; larghezza: 100%; overflow: automatico;) sezione.container > sezione.item ( posizione: relativa; float: sinistra; margine: 0; riempimento: 0; altezza: 140px; overflow: nascosto;) sezione.container > sezione.item > img (larghezza: 100%;)
GALLERY = ( // imposta i parametri predefiniti che possono essere sovrascritti durante l'inizializzazione. contenitore: "section.container", // elemento contenitore principale: "section.item", // elemento separato della galleria img: "section.item > img. hidden ", // l'immagine che inizialmente "nasconderemo" intervallo: 200, // ritardo del conteggio dell'effetto di trasparenza: 5, // numero di elementi da aggiungere init: function(params) ( var _self = this; // Overriding parametri (se vengono passati. In caso contrario, utilizzare il valore predefinito.) if(params != unfined)( for (var key in params) ( _self = params; ) ) return _self.setUp()), setUp: function() ( var _self = this; // Chiudiamo i gestori di eventi. Nel nostro caso, la finestra ne ha bisogno (resize) $(window).bind("resize", function())( _self.adjust(); )); $(document).ready(function())( _self.adjust(); _self.play(); )); // ... per scorrere nel blocco genitore $(_self.container).bind("scroll" , funzione ()( _self.checkScroll(); )); ), // regola la larghezza e il numero di elementi nella riga, a seconda della dimensione della finestra adjustment: function() ( var _self = this; var outWidth = $(_self.container).width(); var outHeight = $( _self.container) .height(); var minWidth = 220; var cnt = Math.floor(outWidth / minWidth); var itemWidth = outWidth / cnt; px" )) ; ), // Avvia l'effetto di comparsa graduale degli elementi. Una piccola sfumatura: la classe nascosta // per un'immagine è necessaria non per nasconderla (il metodo seguente lo farà), ma per cercare // il primo elemento ogni volta che il contenuto viene aggiornato. Ciclo metodo di gioco() passa // attraverso tutte le immagini con la classe nascosta (inizialmente tutti ne hanno una), dopo aver applicato // l'effetto fadeIn(), rimuovendo la classe. Pertanto, quando si carica un nuovo contenuto, il ciclo inizia // non dal primo elemento, ma dal primo caricato. // La prima volta che ho utilizzato il metodo Queue(). play: function() ( var _self = this; var items = $(_self.container).find(_self.img); $(items).each(function(i) ( var cur = $(this).hide( ); $(document).queue("myQueue", funzione(n) ( cur.removeClass("hidden").fadeIn(_self.interval, n); )); $(document).dequeue(" myQueue") ; ), // Caricamento effettivo del contenuto. Qui tutto è semplice: inviamo una richiesta al server: riceviamo // ​​nuovo contenuto sulla pagina (se ce n'è uno) e lo visualizziamo alla fine del blocco genitore load: function() ( var _self = this; $.ajax(( url: "/load .php", tipo: "POST", data: ("count": _self.count), dataType: "json", success: function(json) ( if(json .output) ( $(_self.container).children ("div.clearfix").before(json.output); _self.adjust(); ) )); Se scorrimento verticale nel blocco genitore // uguale al massimo possibile - inviamo una richiesta per nuovi contenuti. // Pertanto, il contenuto verrà caricato solo se // abbiamo fatto scorrere la pagina fino alla fine. checkScroll: function() ( var _self = this; var scrollH = $(_self.container).prop("scrollHeight"); var scrollT = $(_self.container).prop("scrollTop"); var scrollS = $( _self.container).prop("scrollTop") + $(_self.container).height(); if(scrollS == scrollH) ( _self.load(); ) )

PHP. Tutto qui è primitivo, solo per testare.
$json = array(); $html = ""; $items_on_page = !empty($_POST["count"])? (int)$_POST["conteggio"]: 5; for($i = 0; $i< $items_on_page; $i++) { $html .= ""; ) $json["output"] = $html; echo json_encode($json);
Qui viene passato a $_POST solo un parametro (il numero di blocchi da aggiungere), ma è possibile passare anche il punto iniziale, utilizzando il principio dell'impaginazione. Può essere ottenuto in JS utilizzando:
var elementi = $(_self.container).find(_self.img); var inizio = articoli.lunghezza; // e passa la richiesta: data: ("count": _self.count, "start": start), // ... quindi specifica..." LIMIT " quando si recuperano i dati. (int)$_POST["inizio"] . ", " . $articoli_sulla_pagina;

Ecco come è venuta fuori la “impaginazione senza impaginazione”, ma su una pagina di gomma. Esempio funzionante qui.

Nel 2011, era molto di moda (secondo me questa moda arriva da Facebook) creare uno “scorrimento infinito” sui propri siti web: questo avviene quando l'utente gira e gira la rotellina del mouse, e tutti i nuovi risultati di ricerca vengono caricati da Ajax all'indirizzo nella parte inferiore della pagina, trasformando lo scorrimento ordinario in infinito e provocando "dissonanza cognitiva" nell'utente che lo incontra per la prima volta.

Recentemente ho anche visto un articolo su questo sito in cui l'autore esprimeva la sua insoddisfazione per lo "scorrimento infinito" e chiedeva l'uso della buona vecchia "impaginazione".

Sono d'accordo con l'autore. Io stesso sono un tossicodipendente e a volte mi siedo davanti al monitor, incantato, con gli occhi vitrei, girando, girando, girando la ruota magica, incapace di andare al lavoro/al lavoro/al negozio/mangiare/bere/in bagno , e lo giro con un solo pensiero: "Ebbene, quando finirete tutti?!" (Cosa puoi fare? Sono abituato a finire le cose).

Una mattina mi sono alzato e ho deciso fermamente: “Smettila di sopportare questo!”

Vi presento la mia piccola sceneggiatura, che ho scritto recentemente per il mio “ rete sociale"(con blackjack e puttane).

Per vedere la demo, scaricare l'archivio ed eseguire il file “test/test.html”.

Quali innovazioni offre questo script:

Dato che hanno trasformato la “barra di scorrimento” principale in qualcosa di poco chiaro, dobbiamo ripristinare la “barra di scorrimento” normale, cosa che abbiamo fatto disegnando una striscia grigia sul lato destro della pagina, immediatamente a sinistra della “barra di scorrimento” normale.

Il livello raggiunto da questa barra in alto corrisponde al numero di risultati campione che abbiamo già scorso. In generale, questa striscia è piuttosto nera. Il punto in cui è grigio è il punto dell'intero campione in cui ci troviamo ora.

Tieni inoltre presente che l'indirizzo della pagina cambia mentre scorri. Quindi puoi scorrere a metà stasera, aggiungere la pagina ai preferiti, spegnere il computer, andare a letto, svegliarti la mattina, accendere il computer, andare alla pagina che hai aggiunto ai preferiti ieri prima di andare a letto e continuare a scorrere dal nello stesso posto in cui ti eri fermato. E, inoltre, puoi scorrere da questo punto non solo in avanti, ma anche all'indietro.

E per quanto riguarda la navigazione verso qualsiasi pagina desiderata: Da qui puoi accedere a qualsiasi pagina: basta sostituire il numero della pagina di selezione desiderata nell'indirizzo della pagina web. Poiché gli URL leggibili dall'uomo sono ora standard, questa dovrebbe essere una soluzione praticabile.

Questa sceneggiatura ovviamente non è qualcosa di scolpito nel granito, e io stesso ne ho riscritto metà quando mi sono alzato stamattina. Tuttavia, le prestazioni sembrano stabili e sono state testate più recentemente Versioni cromate e FireFox. Dirò subito: non sto inseguendo la "compatibilità cross-browser": può sempre essere completata se qualcuno desidera utilizzare questo script sul proprio sito "cross-browser".

Sembra tutto, la demo parla da sola. Il post suscita commenti.

Cos'altro si può fare (in base ai commenti):

Facendo clic in un punto qualsiasi della striscia si accede alla pagina di selezione corrispondente.

Rimuovere le pagine di dati dalla parte superiore della pagina Web quando sono presenti troppi dati nella pagina Web (per non rallentare).

Esempi di "scorrimento infinito" migliorato.

È passato un po' di tempo dall'ultima volta che ho pubblicato un codice. Oggi correggerò la situazione e ti fornirò alcuni utili snippet jQuery che ti torneranno sicuramente utili sui tuoi siti web.

Non entrerò in teoria; tutta la documentazione jQuery si trova sul sito ufficiale della biblioteca. Ti ricorderò solo cos'è jQuery.

jQuery è una libreria JavaScript che si concentra sull'interazione di JavaScript e HTML. La libreria jQuery ti aiuta ad accedere facilmente a qualsiasi elemento DOM, accedere e manipolare gli attributi e i contenuti degli elementi DOM. La libreria jQuery fornisce anche una comoda API per lavorare con AJAX.

Quindi andiamo!

1. Scorrimento fluido all'inizio della pagina

Nessun sito web può farne a meno. Solo 4 righe di codice consentiranno ai tuoi visitatori di scorrere agevolmente l'intera pagina con un clic.

$("a").click(funzione() ( $("html, body").animate(( scrollTop: 0 ), "slow"); return false; ));

2. Intestazioni di tabella duplicate

Per migliorare la percezione e la leggibilità delle tue tabelle, puoi duplicare le loro intestazioni sotto la tabella. Sembrerebbe una cosa da poco, ma è molto comoda nelle tabelle complesse e grandi che non stanno in un unico schermo.

Var $tpiede = $(""); $($("thead").clone(true, true).children().get().reverse()).each(function())( $tfoot.append($(this)); )); $tfoot.insertAfter("tabella testa");

3. Caricamento di dati esterni

CON utilizzando jQueryÈ molto semplice caricare contenuti esterni sulle pagine web. Può essere inviato direttamente a un blocco DIV, come nell'esempio seguente.

$("#content").load("somefile.html", function(response, status, xhr) ( // gestione degli errori if(status == "error") ( $("#content").html(" Si è verificato un errore: " + xhr.status + " " + xhr.statusText); ) ));

4. Stessa altezza Altoparlanti

È noto che l'allineamento dei blocchi in altezza con lo standard utilizzando l'HTML e i CSS non sono così facili. Solo poche righe di codice qui sotto ti permetteranno di rendere l'altezza di tutti i blocchi uguale all'altezza del blocco più grande.

var altezza massima = 0; $("div.col").each(function())( if($(this).height() > maxheight) ( maxheight = $(this).height(); ) )); $("div.col").altezza(altezzamassima); 5. Zebra da tavolo

Come sai, la percezione e la leggibilità di una tabella saranno notevolmente più elevate se si effettuano alternanze di righe multicolori. Questo è molto facile da implementare in jQuery.

$(document).ready(function())( $("tabella tr:even").addClass("stripe"); ));

6. Aggiornamento parziale della pagina

Utilizzando jQuery, è molto semplice implementare l'aggiornamento (parziale) della pagina a blocchi. Ad esempio, il codice seguente ti consentirà di aggiornare automaticamente il blocco #refresh ogni 10 secondi.

SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // millisecondi di attesa

7. Precaricamento delle immagini

Questo codice ti consente di caricare immagini in sfondo senza caricare durante la visualizzazione della pagina. Basta elencare nella riga 7 le immagini necessarie per il precaricamento.

$.preloadImages = function() ( for(var i = 0; i maxWidth)( rapporto = maxWidth / larghezza; $(this).css("width", maxWidth); $(this).css("altezza", altezza * rapporto); altezza = altezza * rapporto; ) var larghezza = $(questo).larghezza(); var altezza = $(questo).altezza(); if(altezza > altezza massima)( rapporto = altezza massima / altezza; $ (questo).css("altezza", altezza massima); $(questo).css("larghezza", larghezza * rapporto = larghezza * rapporto); //$("#contentpage img").show(); // RIDIMENSIONA IMMAGINE ));

12. Caricamento del contenuto durante lo scorrimento della pagina verso il basso

Più spesso questa tecnica è chiamata scrolling infinito. Il contenuto viene caricato mentre l'utente scorre la pagina. Questo è abbastanza facile da implementare utilizzando il codice seguente.

Caricamento var = falso; $(window).scroll(function())( if((($(window).scrollTop()+$(window).height())+250)>=$(document).height())( if ( caricamento == false)( caricamento = true; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max") . val(), funzione(caricato)( $("corpo").append(caricato); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ ("#loadingbar").css("display","none"); caricamento = false ) ) ); $(document).ready(function() ( $("#loaded_max").val(50); ));

13. Controllo del caricamento dell'immagine

Spesso è necessario verificare se un'immagine è caricata questo momento o no. E jQuery ci aiuterà di nuovo in questo.

Var imgsrc = "img/immagine1.png"; $(" ").load(funzione () ( alert("immagine caricata"); )).error(funzione () ( alert("errore caricamento immagine"); )).attr("src", imgsrc);

14. Ordinamento alfabetico

Se hai bisogno dell'ordinamento dinamico di un elenco in ordine alfabetico, questo piccolo frammento ti aiuterà sicuramente.

$(funzione() ( $.fn.sortList = funzione() ( var mialista = $(this); var listitems = $("li", mialista).get(); listitems.sort(funzione(a, b) ( var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA< compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });

Salvalo: tornerà utile.

Tutte le novità e le novità più interessanti dal mondo WordPress nel mio canale Telegram. Sottoscrivi!