Meniu
AcasăConexiune

Plugin Super WordPress cu derulare infinită. În ce cazuri ce să folosești. Avantajele și dezavantajele defilării infinite

Ați studiat vreodată modul în care oamenii consumă conținut web? Ei vizualizează sute de pagini pe zi. Citiți din mers, concentrându-vă pe imagini și text evidențiat cu aldine. Mai mult, ei scanează pagina mai mult decât citesc.

Acesta este motivul pentru care defilarea infinită a devenit atât de populară; economisește timp la citirea paginilor site-ului web. Conduși de teama constantă de a pierde ceva, oamenii preferă să primească tot conținutul din mers pe o singură pagină.

În acest articol, ne vom scufunda într-o metodă specifică de consum de conținut, defilare infinită și vom analiza câteva exemple interesante.

Ce este derularea infinită?

Defilarea infinită este o tehnică care vă permite să încărcați conținut nou pe pagină în timp ce derulați prin ea. În funcție de scenariu, conținutul poate fi descărcat imediat sau împărțit în subsecțiuni care apar la cerere cu un clic pe un buton.
Se presupune că derularea infinită a fost dezvoltată ca o alternativă mai rapidă și mai ușor de utilizat la paginare. Dar este acest lucru adevărat?
De fapt, totul depinde de situație. Nu există niciun motiv să încărcați o sută de pagini de conținut simultan pentru o navigare lină; sunt șanse ca mulți oameni să renunțe doar la jumătatea drumului. Prin urmare, pare că merită să separăm cazurile de utilizare în cele care sunt bune pentru defilarea infinită și cele care au nevoie de o alternativă.

Unde să folosiți derularea infinită?

Motivul principal pentru a folosi derularea infinită pe o pagină este conținutul lung care trebuie să atragă atenția vizitatorilor. Totul pare simplu, dar conținutul trebuie să fie mare și să aibă o ierarhie plată. În caz contrar, trebuie luate în considerare alternative.

Pentru rețelele sociale

Pe rețelele sociale și pe bloguri, toate postările sunt relativ egale. Ei bine, unele dintre ele pot fi mai mult sau mai puțin interesante, dar este prea subiectiv să le împărțim în subcategorii. Platforme precum Facebook sau Twitter se actualizează în timp real și pleacă povestea anterioară mesaje. Acest lucru le face cu adevărat fără fund.

Pentru nu mai puțin continut important

Să presupunem că există un site web (o galerie de artă interactivă) al cărui scop este să inspire spectatorul cu imaginile prezentate pe el. Într-o astfel de situație, de regulă, oamenii nu caută ceva anume. Mai degrabă, vor derula iar și iar până când vor găsi ceva care le atrage atenția. Aici, cel mai mult pe care îl puteți face este să le lăsați să sorteze rezultatele în funcție de recentitate sau popularitate.

Pentru interfețe mobile

Smartphone-urile și tabletele au făcut din derularea infinită o acțiune intuitivă pentru utilizatorii de telefonie mobilă. Acesta permite utilizatorului să nu fie nevoit să descarce tot conținutul simultan, făcând astfel aplicația sau site-ul mobil mai ușor.

Pentru povestire

Astfel, cât de infinită defilare este esențială pentru a menține utilizatorul interesat și angajat. Cu toate acestea, trebuie folosit cu înțelepciune, doar acolo unde este cu adevărat necesar.

Salutare tuturor. Astăzi vreau să vă vorbesc despre cum să vă organizați" încărcare leneșă» conținut de pe paginile de destinație.

Adesea, este numit și „defilare infinită”. Probabil ați observat un efect similar atunci când conținutul nu este prezent inițial pe site, dar pe măsură ce derulați pagina, acesta este încărcat fără probleme.

Cu mult timp în urmă am scris la secțiunea „Sugestiile tale” cu o solicitare de a scrie un articol despre cum să implementăm un astfel de efect:


Așa că am decis să încep să-l implementez. Mulțumesc că mi-ai dat idei. Să începem...



Ca în majoritatea cazurilor, începem prin a include biblioteca jQuery:

Și acum trebuie să divagați puțin și vă voi explica esența metodei. Toate acestea sunt pornite pentru a nu încărca toate elementele site-ului (portofoliul sau recenziile dvs.), ci pentru a le încărca la nevoie. De exemplu, când utilizatorul face clic pe butonul „Afișează mai multe”. În acest fel pagina se va încărca mult mai repede. Și acum ideea este când ajax ajutor tehnologie, vom încărca elementul necesar (div) și dosar terț către pagina noastră de destinație. Este atât de simplu, atât în ​​teorie, cât și în practică, și o veți vedea în curând.

Acum să creăm un bloc principal, de exemplu, cu imagini ale lucrărilor noastre. Să presupunem că desenăm pictograme și le încărcăm atunci când se face clic pe un buton. Am creat aceasta structura:

Portofoliu Arată mai multe...

După cum puteți vedea, totul este simplu. Dar la ce ar trebui să fii atent? Și trebuie să acordați atenție div-ului cu id="smartPortfolio", id="moreButton" și id="loadingDiv", deoarece acestea sunt folosite în script, ceea ce ne ajută să încărcăm conținut din alte pagini. SmartPortfolio este un „container” pentru portofoliul nostru. MoreButton - acesta va fi butonul nostru, atunci când faceți clic, o altă parte a portofoliului va fi încărcată. LoadingDiv - zona în care va fi afișat textul când portofoliul este complet deschis sau apare o eroare.

De exemplu, unii dintre cititori vor încerca în continuare să testeze acest script nu pe server, ci pur și simplu se vor deschide fișier indexîn browser. Dacă da, vor vedea un mesaj de eroare. În plus, dacă conexiunea este foarte lentă, poate dura timp pentru a descărca fișiere și, pentru ca utilizatorul să înțeleagă că procesul este în desfășurare, puteți introduce un mesaj acolo că încărcare date sau loc (imagine, indicator de progres sau altceva).

Nu am scris scenariul în sine, dar l-am găsit pe unul dintre site-uri, autorul este listat în codul sursă, dacă sunteți interesat, aruncați o privire. Din moment ce nu este prea dimensiune mare, apoi voi da totul, dar dacă intenționați să utilizați aceleași nume de ID și aceleași căi de fișiere ca ale mele, atunci nici nu trebuie să vă uitați la el, ci pur și simplu să îl conectați înainte de a închide eticheta corporală(în subsol).

Pentru cei care plănuiesc să facă editări, iată scriptul în sine:

Var lazyload = lazyload || (); (funcție($, lazyload) ( „utilizați strict”; var pagina = 2, buttonId = „#moreButton”, loadingId = „#loadingDiv”, container = „#smartPortfolio”; lazyload.load = function() ( var url = "./pages/" + pagina + ".html"; $(buttonId).hide(); $(loadingId)(); !response || response.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("Portofoliul complet încărcat"); return; ) appendContests(răspuns); răspuns) ( $(loadingId).text("Ne pare rău, a apărut o eroare la cerere. Vă rugăm să reîmprospătați pagina."); $(buttonId).show(); ).appendTo($(container));

Deci, acum merită să vorbim despre fișierele din care vom încărca informații. Scriptul presupune că acestea vor fi fișiere cu nume 2.html...5.html etc. Care conține informațiile noastre. De exemplu, primul fișier pe care îl încărc este 2.html și are următorul conținut:

În structura site-ului meu, paginile din care vor fi preluate informații pentru încărcarea ulterioară la clic se află în folderul pagini. Există trei fișiere, dintre care două sunt pline, iar ultimul este gol. Aceasta este ceea ce presupune logica scriptului.

Calea din script este specificată după cum urmează:

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

Dacă intenționați să utilizați o cale diferită, asigurați-vă că o înlocuiți în script. În plus, dacă ați folosit alte ID-uri, atunci acestea vor trebui redefinite în script. Iată-l:

ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";

Și, așa cum am spus deja, înainte de eticheta body de închidere includem scriptul în sine:

Ca asta pe pagina de destinație Puteți implementa încărcare leneșă. Trimite-ne mai multe subiecte despre care ai dori să citești un articol de pe blog. Pe cât posibil, voi încerca să public nu materialul planificat, ci pe cel despre care întrebați în secțiunea „Sugestiile voastre”. Și asta e tot pentru azi. Pa!

În timp ce scriam acest articol, mi-am dat seama că există două tipuri de oameni care sunt mereu în dezbatere: cei care preferă paginarea și cei care susțin utilizarea derulării infinite - ambele aceste „clanuri” oferă dovezi convingătoare în favoarea punctului lor de vedere. .

După părerea mea, atât paginarea, cât și derularea infinită au avantajele lor. Care dintre aceste metode să alegeți depinde de criteriile fiecărui dezvoltator individual.

De exemplu, Google folosește paginarea în loc de derulare infinită, ceea ce este foarte convenabil. O social media Precum Twitter și Facebook vor prefera întotdeauna să folosească derularea infinită, deoarece nimănui nu îi place să facă clic de fiecare dată doar pentru a derula prin fluxul de știri.

Care este metoda derulării infinite?

În dezvoltarea web, derularea infinită este o tehnică care ajută la încărcarea automată a conținutului atunci când utilizatorul ajunge la sfârșitul conținutului afișat și derulează pagina.

Cele mai bune utilizări ale acestei tehnici pot fi găsite pe Twitter, Facebook și multe alte locuri.

Mai jos este o listă cu cele mai bune 10 plugin-uri jQuery infinite scroll.

Cele mai bune 10 pluginuri jQuery Infinite Scroll:

Dacă decideți să utilizați pluginul jQuery infinite scroll, vă vom face ușor. Cele 10 plugin-uri jQuery infinite scroll de mai jos acceptă toate funcțiile de care ați putea avea nevoie - alegeți-o pe cea care se potrivește cel mai bine site-ului dvs. pentru a vă face experiența utilizatorului mai eficientă și mai fluidă.

jQuery zidărie


Zidăria plasează elementele în spațiul vertical disponibil. Un plugin foarte popular cu aproape 13.000 de stele pe github.

Descărcați versiunea demo

iScroll


Doriți să creați o defilare infinită lină? iScroll vă va ajuta cu siguranță să creați o senzație netedă jquery-scroll. Datorită sistem inteligent cache, puteți crea derulare infinită pentru a implementa fiabile interfata utilizator. Pe lângă jQuery, acceptă și javascript.

Descărcați versiunea demo

WayPoints


WayPoints facilitează implementarea funcționalității de defilare a paginii. Cu asta plugin simplu Vă puteți transforma navigarea anterioară/următoare într-o interfață AJAX care poate fi derulată la infinit. Documentația detaliată este disponibilă pentru WayPoints, deci este aplicare practică nu va fi o sarcină dificilă.

Descărcați versiunea demo

Infinite-Scroll.js


Un plugin jQuery infinite scroll foarte compact. Infinite Scroll adaugă automat următoarea pagină, eliminând nevoia de a încărca toate paginile simultan.

Descărcați versiunea demo

jScroll


jScroll este un plugin de defilare infinită jQuery ușor de utilizat, care permite personalizarea flexibilă.

Descărcați versiunea demo

jQuery-Endless-Scroll


Acest plugin nu va permite niciodată utilizatorilor să rămână blocați în așteptarea încărcării noua pagina. jQuery-Endless-Scroll este foarte flexibil, include într-adevăr caracteristici unice, cum ar fi adăugarea de adrese URL prietenoase, trunchierea datelor, capacitatea de a derula și de a adăuga conținut în partea de sus a paginii.

Descărcați versiunea demo

Scroll infinit AJAX


Infinite AJAX Scroll este un plugin inteligent jQuery infinite scroll. El se poate transforma sistem existent paginarea într-un sistem de defilare infinit. Acest plugin citește linkurile „următorul/anterior” pe server pagina existentăși, când utilizatorul ajunge la sfârșitul acesteia, încarcă acele pagini folosind AJAX.

Această abordare este, de asemenea, optimizată pentru SEO și foarte ușor de implementat.

Descărcați versiunea demo

JQuery-ESN-Autobrowse


Un plugin de defilare infinit jQuery utilizat pe scară largă pe care îl puteți utiliza cu ușurință. Adaugă automat conținutul paginii folosind AJAX atunci când utilizatorul vede pagina din memoria cache încorporată a browserului. Pluginul este ușor de învățat și de utilizat practic.

Descărcați versiunea demo

jQuery Infinite Scroll


Un alt plugin simplu jQuery infinite scroll, care vă permite să defilați prin text sau imagini.

Descărcați versiunea demo

Nesfârșit.JS


Endless.js este un plugin jQuery care vă ajută să creați defilări infinite pentru elemente HTML. Conectează partea de jos cu partea de sus sau secțiunea din stânga la dreapta, creând astfel iluzia de defilare fără sfârșit.

Când despre care vorbim despre marketing online sau web design, este extrem de important să fii inițiatorul unor idei de succes și să te modelezi propria sferă. Astăzi vom vorbi despre una dintre aceste tendințe - derularea fără sfârșit a paginilor de pe un site web: ce oportunități prezintă pentru afaceri? Care este cea mai bună modalitate de implementare și când ar trebui abandonată această funcție? Materialul este scris pe baza traducerii unui articol despre Infinite Scrolling de la SpeckyBoy.

Secțiunile principale ale articolului:

Millennials sunt cunoscuți pentru obiceiul lor de a accesa site-urile web în câteva secunde, hotărând dacă să rămână sau să plece. Proiectele concurente trebuie să știe exact cum să adune și să rețină publicul, altfel riscă să rămână în umbră. În efortul de a atrage atenția maselor, de exemplu, folosind efectul de paralaxă, mulți au decis să introducă și defilarea infinită. Această abordare a fost folosit activ de câțiva ani ultimii ani, iar exemplele precum Facebook, Twitter și Instagram nu fac decât să confirme eficacitatea acestuia.

Cu toate acestea, faptul că scroll infinit este potrivit pentru aceste site-uri nu înseamnă că va fi potrivit pentru resursa dvs. web. Caracteristica este destul de utilă atunci când se realizează anumite sarcini, dar la unele proiecte poate, dimpotrivă, să împiedice atingerea obiectivelor.

Ce este derularea infinită?

Întrucât acest termen poate fi folosit pentru a desemna diferite caracteristici și funcţionalitate, V în acest caz, sens defilare nesfârșită cu descărcare automată conținut pe măsură ce utilizatorul derulează în jos pe pagină. Se pare că pagina este nesfârșită și utilizatorul poate derula cât dorește.

Capacități de defilare infinită

Defilarea infinită funcționează cel mai bine cu anumite tipuri conţinut. De exemplu, este ideal pentru site-urile cu nivel scăzut implicare, cum ar fi Twitter. Deoarece această resursă web este plină cu blocuri scurte de text, vizitatorii scanează rapid conținutul.

Cel mai adesea, derularea infinită a paginilor funcționează bine cu cantități mari de conținut ușor de digerat. Dacă se potrivește obiectivelor companiei dvs., această funcțieȚi se va potrivi și ție.

Caracteristicile pozitive ale metodei:

  • Reținerea utilizatorilor. Acesta este unul dintre principalele trăsături caracteristice derulare fără sfârșit, plus vă permite să implicați rapid vizitatorii. În plus, îi motivează pe utilizatori să rămână pe pagină, deoarece pot derula la nesfârșit conținutul derulând în jos.
  • Navigare ușoară/ușurință în utilizare. Defilare – ușor de înțeles și metoda universala, nefiind necesar efort deosebit pentru executare. Oferă imediat vizitatorilor acces la informațiile principale ale site-ului.
  • Potrivit pentru vizualizarea materialelor ilustrate, precum și pentru utilizatori dispozitive mobile. Defilare infinită - cale bună oferă vizualizarea multor simple elemente vizuale. Bun și pentru dispozitivele mobile unde cel mai bun mod Navigarea este considerată derulare cu un deget.

Acesta este motivul pentru care această abordare este grozavă pentru Instagram, al cărui obiectiv principal este să prezinte rapid o serie de . Nu este nevoie să zăboviți mult timp pe fiecare imagine, în plus, majoritatea vizitatorilor serviciului folosesc dispozitive mobile.

Motive pentru a evita derularea infinită

În ciuda avantajelor, cel mai bine este ca proprietarii unor tipuri de proiecte web să refuze să implementeze cu totul un astfel de mecanism:

  • Site-uri comerciale. Ele facilitează căutarea și achiziționarea de produse care îndeplinesc anumite caracteristici. Resursele web destinate vânzărilor ar trebui să ofere simplă și instrumente de precizie. Dacă scopul principal al companiei dvs. este de a face vânzări, utilizarea derulării infinite nu este recomandată. Dezvoltați un simplu și design ușor de utilizat Cu dizabilități astfel încât consumatorii să se poată concentra asupra achiziției lor.

, nu va putea face asta. Acest lucru este frustrant pentru cei care preferă să vizualizeze textele într-o cantitate mai limitată.

Adică, în exemplul de mai sus, dacă doriți, puteți încărca produse făcând clic sau folosind navigarea. A avea un meniu vă permite să rezolvați parțial problemele legate de căutarea anumitor produse și imposibilitatea de a exclude anumite informații.

Dacă decideți să adăugați derulare infinită pe site-ul dvs., următoarele tehnici pot îmbunătăți experiența utilizatorului:

  • Elaborați un plan de rezervă. Deoarece această funcție este implementată cu folosind JavaScript, unele persoane nu vor putea accesa derularea. Dezvoltatorii ar trebui să anticipeze această situație și să adauge paginare.
  • Păstrați navigarea vizibilă. Dacă vizitatorii trebuie să parcurgă un flux nesfârșit de articole pentru a reveni la pagina anterioară, probabil că nu o vor face.
  • Nu utilizați o bară de defilare. Unii dezvoltatori nu recomandă combinarea unui scroll infinit cu o bară de defilare care arată utilizatorilor cantitatea de informații rămase pe pagină. Acest lucru îi induce în eroare să creadă că articolul este aproape de finalizare atunci când conținutul continuă să fie adăugat.
  • Furnizați afișaj de încărcare. Este o experiență frustrantă atunci când vizitatorii navighează printr-un flux aparent nesfârșit de date și se găsesc nedumeriți. Asigurați-vă că adăugați o pictogramă de încărcare pentru a indica faptul că procesul este în desfășurare.
Total

Similar altora, derularea la nesfârșit pe o pagină poate duce la rezultate atât pozitive, cât și negative. Totul depinde de obiectivele tale și de tipul de proiect. Proprietarii de site-uri web orientate spre vânzări, precum și resurse web al căror conținut necesită studiu detaliat, ar trebui să vă gândiți bine înainte de a implementa o astfel de caracteristică. Cel puțin, adăugați opțiuni alternative navigare. Amintiți-vă că utilizarea fără discernământ a acestei tendințe poate duce la pierderea de vizitatori.

Vă rugăm să scrieți adăugările și gândurile dvs. despre subiectul de mai jos.

, folosește exemple pentru a demonstra avantajele și dezavantajele unei tehnici populare - derularea fără sfârșit.

Prezentarea unei cantități mari de informații, cum ar fi rezultatele căutării, link-uri, articole sau imagini, într-un mod ușor de utilizat poate fi destul de dificil.În trecut, această problemă a fost rezolvată datorită unui mecanism de paginare fiabil. Cu toate acestea, în ultimii câțiva ani, multe site-uri au trecut la derulare infinită. Defilarea infinită este un mecanism prin care următoarea „pagină” de date este încărcată automat pe măsură ce utilizatorul defilează până la sfârșitul blocului anterior.

Uneori, această abordare este foarte eficientă, alteori este extrem de nereușită. Iată câteva avantaje și dezavantaje ale defilării infinite:

Avantaje

Utilizarea eficientă a spațiului ecranului. Gata cu butoanele incomode sau link-uri la numerele paginii.

Mai mult design intuitiv Pentru dispozitive tactile.

Derularea unei pagini prin mișcarea degetului în sus pe ecran este o tehnică comună printre dispozitivele tactile. Această acțiune necesită mai puțină precizie decât a face clic pe linkuri sau butoane. Implicare mai mare. Legat de al doilea punct

următorul fapt

: Utilizatorii, indiferent de dispozitiv, tind să aprofundeze materialul dacă nu necesită mult efort din partea lor. Dacă ați pierdut vreodată noțiunea timpului în timp ce parcurgeți actualizările de pe Twitter sau Facebook, veți înțelege despre ce vorbim.

Defecte Termeni limitati de utilizare. Derularea infinită nu este potrivită pentru fiecare site și nu pentru orice tip de conținut. De exemplu, o listă de produse dintr-un magazin online este un loc prost pentru a implementa derularea fără sfârșit. Utilizatorul va dori probabil să comute între listele de produse și descrieri fără a-și pierde poziția pe pagină. Complexitate suplimentară.Împreună cu scripturile standard de la numeroase biblioteci JavaScript implementarea unui mecanism unic poate necesita

cod unic. Va fi necesar să se asigure că chiar și acei utilizatori care au Nu JavaScript. Este mai bine să nu-l folosești deloc decât să-l folosești în detrimentul resursei.

Cerințe suplimentare

SEO.

Deși Google observă că algoritmul lor ia în considerare paginile care conțin mai multe versiuni (de exemplu, ia în considerare „Pagina-1”, „Pagina-2” împreună cu pagina „Vedeți tot” etc.), refuzând să testeze, riști ca site-ul tău să fie aruncat în motoarele de căutare. Reducerea numărului de afișări. Este posibil ca acest lucru să nu afecteze experiența utilizatorului, dar dacă modelul dvs. de afaceri este direct legat de numărul de afișări

bannere publicitare