Készítsen egy „lusta” görgetés jquery

Ahogy vissza tudok emlékezni, a webes fejlesztők mindig kiderült, hogy a jó öreg lapszámozásról amikor megjelenítéséhez szükséges nagy mennyiségű tartalmat. Ne érts félre, lapszámozás is hatékony módja, hogy megjelenítse a tartalmat, de ebben a cikkben fogunk beszélni egy másik megközelítés - „lusta” görgetés, más néven a „végtelen scroll” és a „lemondást lapszámozásról.” Ezzel a technikával a tartalom feltöltés keresztül történik AJAX, amikor a felhasználó a az oldalt, hogy az a hely, ahol a letöltött tartalom véget ér. Lazy görgetés által használt néhány internetes óriások, mint a Facebook és a Pinterest. Ebben a bejegyzésben megpróbáljuk megvalósítani plugin lusta terhelés jQuery.

Előnyök és hátrányok

A módszer előnyei nyilvánvalóak. Annak érdekében, hogy a további részleteket a tartalom nem kell mozgatni, hogy a másik oldalon, ami szintén kopog a figyelmet, és arra kényszeríti, hogy vizsgálja meg egy másik területe az oldalt. Kiegészíti azt a képességét, hogy lusta rakodási tartja a felhasználó figyelmét az ugyanazon a területen az olvasásnál.

Lazy loading nem hatékony minden helyzetben. Például, amikor a felhasználó rákattint a linkre, majd vissza akar térni az előző oldalra böngészőt használ történelem, elveszíti pozícióját a része volt, hogy feltöltötte a segítségével AJAX. Az egyik módja annak, hogy megoldja ezt a problémát -, hogy nyissa ki az összes link új ablakban vagy lapon.

Ezen kívül, mielőtt úgy dönt, hogy használja ezt a technikát tudni, hogy a keresők nem túl barátságos az ilyen döntéseket. Annak érdekében, hogy a problémát a tartalom láthatóságát a keresőmotorok, győződjön meg róla, hogy akkor alternatívát nyújtanak a lapszámozásról vagy a helyszínen térkép.

Kezdjük egy nagyon egyszerű vázlat oldalon. A legfontosabb része az oldalt látható az alábbi kódot. Minden fájl lehet megtekinteni a forráskódot.

Key megfigyelések

Ha jobban megnézed a dokumentum, amelyet már létrehoztunk, látni fogja, hogy az új helyzetben lesz letölthető, ha rákattint a „Load” gombra. Itt vannak a tételek, hogy mi hajtja végre:

• meg kell tennie a kérelmet az URL-t, amely hozza vissza elemek listáját, amelyeket meg kell illeszteni az oldalon
• Ezt a folyamatot meg kell ismételni minden egyes alkalommal, amikor a gombot megnyomja, de az eredmény vissza kell új hozzászólások
• Új hozzászólások kell kiadni minden egyes kérelmet, amíg van az, hogy a visszatérés
• ha nincs több állomás továbbra is szükség van, hogy tájékoztatja a felhasználót, hogy a végére ért

Sablonok AJAX válasz

Ideális esetben, meg kell, hogy egy változót, amely azt fogja tárolni az oldalszámot, és ezt a számot használja, hogy meghatározza az URL-t, amelyre küldjük a kérelmet. A mi demo, mi lesz három ilyen oldalak: 2.html, 3.html és üres oldal 4.html.

Ha rákattint a letöltés gombra több adatot, bizonyos időt vesz igénybe attól a pillanattól kezdve elküldi a kérelmet, és megkapta a választ. Ebben az esetben, akkor elrejti a letöltés gombra, hanem megmutatja a szövegből, mondván, hogy a berakodás elemek:

Hozzáadása az adatokat az oldalon

Az első, az ellenkezője igaz a változások tettünk, amíg a kérelmet még folyamatban van, hogy van, hogy bemutassa a „Load”, és elrejti az információs szöveget. Másodszor, meg kell beszúrni az adatokat az oldal után a tételek, amelyek már az oldalon. Megjegyezzük, hogy az egyszerűség kedvéért ebben a példában, megkapjuk a HTML adatot, amint a lekérdezés eredménye. Küldhet választ JSON formátumban, hozzátéve, a további változók, mint például az állapot vagy üzenet. Kód adatsebesség alábbiakban mutatjuk be:

Kezeljük a beállítást, ha az adatok befejeződött

Ha eléri az utolsó bejegyzés, meg kell mutatni a felhasználónak, hogy nincs több hozzászólás. Ezt meg lehet tenni a különböző módokon. Akkor küldje állapotát a beépített visszatérési kód vagy üzenet. Mivel közvetlenül használja a HTML jelölőnyelv ebben a példában, akkor ürítse ki a válasz ebben az esetben lenne azt mondani, hogy az adatok is elvesznek.

következtetés

Végül a választ JSON tartalmazhatnak jelző üzenet, hogy a kérés volt megfelelő; adatok valamint információ arról, hogy még mindig vannak olyan pozíciók elindulni. Ebben az esetben ez egy hatékonyabb módja, hogy küldjön az eredményt.

5 óra utolsó oszlopában „jQuery”

Ma szeretnénk, hogy meséljek TypeIt könyvtár - ingyenes jQuery plugin. Ön tudja használni, hogy szimulálja a gépelést. Ha minden megfelelően van beállítva, nagyon realisztikus hatás érhető el.

jQuery plugin létre egy idővonal.

jQuery plugin létre egy Gantt diagram.

Egy példa arra, hogyan hajtsák végre a letöltött fájl segítségével PHP és jQuery ajax.

Eugene Romanenko

lindorenko

kuzen Stenli

Ez rossz megközelítés, ha annak érdekében, hogy megtanulják, hogy több eredményt, meg kell nyomni. Szükség van arra, hogy az aktuális művelet tudható előre, hogy több eredményt, de fel kell, hogy megtudja a találatok számát és az aktuális oldal számát. merészel

Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!

Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!

Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.

Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!