După cum îmi amintesc, dezvoltatorii web apelat întotdeauna la bun paginația vechi atunci când au nevoie pentru a afișa o cantitate mare de conținut. Nu mă înțelege greșit, paginația este încă o modalitate eficientă de a afișa conținutul, dar în acest articol vom vorbi despre o altă abordare - „renunțarea la paginare“ „leneș“ defilare, de asemenea, cunoscut sub numele de „scroll infinit“ și Folosind această tehnică, încărcarea de conținut se face prin intermediul AJAX, atunci când utilizatorul derulează pagina în locul unde se termină conținutul descărcat. defilare Lazy folosit de unii giganti de Internet, cum ar fi Facebook și Pinterest. În acest post vom încerca să realizeze plug-lor pentru încărcare leneș pe jQuery.
Avantaje și dezavantaje
Avantajele acestei metode sunt evidente. Pentru a obține porțiuni suplimentare ale conținutului nu este necesar să se mute la o altă pagină, care bate, de asemenea, atenția și forțele dumneavoastră să se uite într-o altă zonă a paginii. Adăugarea de capacitatea de încărcare leneș vă țineți atenția utilizatorului pe același teren în procesul de citire.
Lazy loading nu este eficient în toate situațiile. De exemplu, atunci când un utilizator face clic pe link-ul, și apoi vrea să se întoarcă la pagina anterioară folosind un browser de istorie, își pierde poziția sa în partea care a fost încărcat cu ajutorul AJAX. O modalitate de a rezolva această problemă - pentru a deschide toate link-urile într-o fereastră nouă sau o filă.
În plus, înainte de a decide să folosească această tehnică știu că motoarele de căutare nu sunt foarte prietenoase cu astfel de decizii. Pentru a evita problema vizibilității conținutului pentru motoarele de căutare, asigurați-vă că vă poate oferi o alternativă la paginația sau harta site-ului.
Să începem cu o pagină de schiță foarte simplu. Cea mai importantă parte a paginii prezentată în codul de mai jos. Fișierele complete pot fi vizualizate în codul sursă.
observaţii cheie
Dacă te uiți atent la documentul pe care le-am creat, veți vedea că noile poziții vor fi descărcate atunci când faceți clic pe butonul „Load“. Aici sunt elementele pe care le vom implementa:
- trebuie să facă o cerere la URL-ul, care va aduce înapoi o listă de elemente care trebuie introduse pe pagina
- Acest proces trebuie repetat de fiecare dată când este apăsat butonul, dar rezultatul ar trebui să fie returnate mesaje noi
- Mesaje noi ar trebui să fie emise pentru fiecare cerere, atâta timp cât există că întoarcerea
- atunci când nu mai rămân stații, este necesar să se informeze utilizatorul că a ajuns la final
Șabloane răspuns AJAX
În mod ideal, trebuie să declare o variabilă, pe care o vom păstra numărul paginii, și de a folosi acest număr pentru a determina URL-ul, la care vom trimite solicitarea. În demo-ul nostru, vom avea trei astfel de pagini: 2.html, 3.html și pagina 4.html goală.
Când faceți clic pe mai multe date pe butonul de descărcare, este nevoie de ceva timp din momentul trimiterii cererii și primirea răspunsului. În acest caz, vom ascunde butonul de download, dar în schimb va arăta unele din text, spunând că elementele de încărcare:
Adăugarea datelor la pagina
La început, reversul este adevărat schimbările pe care le-am făcut până când cererea este încă în curs de desfășurare, care este, pentru a arăta „Load“ și ascunde textul de informații. În al doilea rând, este necesar să se introducă datele în pagină după elementele care sunt deja în pagină. Rețineți că, pentru simplitate, în acest exemplu, vom obține datele HTML cât mai curând rezultatul interogării. Puteți trimite un răspuns în format JSON, adăugând variabilele suplimentare, cum ar fi starea sau mesajul. rate de date cod este prezentat mai jos:
Ne ocupăm de opțiune atunci când datele se termină
Odată ce ajungeți la ultimul post, aveți nevoie pentru a arăta utilizatorului că nu există mai multe posturi. Acest lucru se poate face în diverse moduri. Puteți trimite starea codului de retur încorporat sau mesaj. Din moment ce vom folosi direct markup HTML în acest exemplu, apoi goliți răspunsul în acest caz, ar fi să spunem că datele sunt plecat.
concluzie
În cele din urmă, răspunsul la JSON poate conține un mesaj care indică dacă solicitarea a fost făcută în mod corespunzător; date; precum și informații cu privire la dacă există încă poziții pentru a boot. În acest caz, acesta este un mod mai eficient pentru a trimite rezultatul.
5 lecții coloana ultima „jQuery“
Astăzi am dori să vă spun despre TypeIt bibliotecă - gratuit jQuery plugin. Puteți să-l utilizați pentru a simula tastare. Dacă totul este configurat corect, acesta este un efect foarte realist poate fi atins.
jQuery plug-in pentru a crea o cronologie.
jQuery plugin pentru a crea o diagramă Gantt.
Un exemplu despre cum să pună în aplicare fișierul de descărcare prin intermediul PHP și jQuery ajax.
Eugene Romanenko
lindorenko
kuzen Stenli
Aceasta este o abordare greșită, atunci când pentru a afla dacă există mai multe rezultate, trebuie să apăsați. Este necesar pentru funcționarea curentă a ști în avans dacă mai multe rezultate, dar trebuie să afle numărul total de rezultate și numărul paginii curente. îndrăzni
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!