Stranica se učitava dok se pomičete. Okreni me potpuno

Bok svima. Danas želim s vama razgovarati o tome kako organizirati lijeno učitavanje sadržaja na odredišnim stranicama.

Često se naziva i " beskonačno listanje" Vjerojatno ste vidjeli sličan učinak kada sadržaj u početku nije prisutan na web-mjestu, ali kako se pomičete po stranici, glatko se učitava.

Davno smo pisali odjeljku "Vaši prijedlozi" sa zahtjevom da napišemo članak o tome kako implementirati takav učinak:

Pa sam odlučio to početi provoditi. Hvala što si mi dao ideje. Započnimo...

Kao i u većini slučajeva, počinjemo uključivanjem jQuery biblioteke:

A sada morate malo skrenuti s teme i objasnit ću vam suštinu metode. Sve ovo je pokrenuto kako ne bi učitavali sve elemente stranice (vaš portfolio ili recenzije), već ih učitavali po potrebi. Na primjer, kada korisnik klikne na gumb "Prikaži više". Na ovaj način stranica će se puno brže učitavati. A sada je poanta u korištenju ajax tehnologije učitat ćemo potreban element(div) i datoteka treće strane na našu odredišnu stranicu. Sve je tako jednostavno, iu teoriji iu praksi, au to ćete se uskoro uvjeriti.

Sada stvorimo glavni blok, na primjer, sa slikama naših radova. Pretpostavimo da crtamo ikone i učitavamo ih kada se klikne gumb. Napravio sam ovu strukturu:

Portfelj Prikaži više...

Kao što vidite, sve je jednostavno. Ali na što treba obratiti pozornost? Trebate obratiti pozornost na div s id="smartPortfolio", id="moreButton" i id="loadingDiv", jer se oni koriste u skripti, što nam pomaže učitavanje sadržaja s drugih stranica. SmartPortfolio je "spremnik" za naš portfelj. MoreButton - ovo će biti naš gumb, kada se klikne, učitat će se drugi dio portfelja. LoadingDiv - područje gdje će se prikazati tekst kada je portfelj potpuno otvoren ili se dogodi neka greška.

Na primjer, neki će čitatelji ipak pokušati testirati ovu skriptu ne na poslužitelju, već će jednostavno otvoriti indeksnu datoteku u pregledniku. Ako je tako, vidjet će poruku o pogrešci. Osim toga, ako je veza vrlo spora, preuzimanje datoteka može potrajati, a kako bi korisnik shvatio da je proces u tijeku, možete tamo unijeti poruku da Učitavam podatak ili mjesto (slika, indikator napretka ili nešto drugo).

Sam scenarij nisam napisao, već sam ga našao na jednom od sajtova, autor je naveden u izvornom kodu, ako vas zanima, pogledajte. Budući da i on nije velika veličina, onda ću vam dati sve, ali ako planirate koristiti iste ID nazive i putanje datoteka kao moji, onda ga ne morate ni pogledati, već ga jednostavno spojite prije zatvaranja oznaka tijela(u podnožju).

Za one koji planiraju uređivati, evo same skripte:

Var lijeno opterećenje = lijeno opterećenje || (); (function($, lazyload) ( "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + stranica + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, uspjeh: funkcija(odgovor) ( if ( !response || response.trim() == "NIJEDAN") ( $(buttonId).fadeOut(); $(loadingId).text("Portfelj potpuno učitan"); return; ) appendContests(response); ), pogreška : function(response) ( $(loadingId).text("Žao nam je, došlo je do pogreške sa zahtjevom. Molimo osvježite stranicu."); ) )); var appendContests = function(response) ( var id = $(buttonId) ); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); stranica += 1; ); ))(jQuery, lazyload) ;

Dakle, sada vrijedi razgovarati o datotekama iz kojih ćemo učitati informacije. Skripta pretpostavlja da će to biti datoteke s imenima 2.html...5.html, itd. Koji sadrži naše podatke. Na primjer, prva datoteka koju učitavam je 2.html i ima sljedeći sadržaj:

U strukturi moje web stranice, stranice s kojih će se informacije preuzeti za naknadno učitavanje kada se klikne nalaze se u mapi stranica. Postoje tri datoteke, od kojih su dvije pune, a zadnja je prazna. To pretpostavlja logika scenarija.

Putanja u skripti navedena je na sljedeći način:

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

Ako planirate koristiti drugu putanju, svakako je zamijenite u skripti. Osim toga, ako ste koristili druge ID-ove, oni će se morati ponovno definirati u skripti. Upravo ovdje:

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

I, kao što sam već rekao, prije završne body oznake uključujemo samu skriptu:

Ovako na odredišna stranica Možete implementirati lijeno učitavanje. Pošaljite nam više tema o kojima biste željeli pročitati članak na blogu. Koliko je to moguće, pokušat ću objaviti ne planirani materijal, već onaj o kojem pitate u odjeljku "Vaši prijedlozi". I to je sve za danas. Pozdrav!

Pješčanik

regrut 9. veljače 2013. u 21:42 Zavrti me potpuno. Responzivni izgled s beskonačnim pomicanjem

• Drvna soba *

Nedavno sam naišao na problem:
- Izgled prilagodljivog izgleda. Prilikom promjene veličine prozora, elementi na stranici se skaliraju na određenu širinu. Ako je širina manja od minimalne, broj elemenata u nizu postaje manji, au isto vrijeme popunjava cijeli ekran po širini. Značenje je jasno - stranicu treba gledati na bilo kojem monitoru, uklj. na mobilnim uređajima.
- Sadržaj se učitava prilikom skrolanja stranice, tako da se prikazuje samo dio sadržaja, ostatak se učitava dok skrolate prema dolje (analogno VK zidu).
- Pojavljivanje elemenata na stranici događa se redom, s glatkim povećanjem prozirnosti svakog elementa. Nakon što prvi element postane neproziran, primjenjuje se učinak sljedeći element... i tako dalje za sve.

Nisam mogao pronaći gotovo rješenje, morao sam sve napisati ispočetka. Možda je cijela ova značajka beskorisna, ali ako nekome iznenada bude korisna, koristite je, testirajte, uživajte u njoj:

HTML. Za testiranje sam brzo sastavio vrlo jednostavan izgled. Kako se ne bih dugo mučio sa stilovima, povezao sam bootstrap. Evo oznake:
Pozdrav svijete! // U principu, možete inicijalizirati klasu ne ovdje, i bez parametara. Više o ovome kasnije. // spremnik u kojem se prikazuju svi elementi. // U našem slučaju, svaka stavka je zasebni element Na stranici. Iznijet ćemo ih puno. // ... mnogo, mnogo predmeta // Mi čistimo, jer naše stavke imaju float:left

CSS. Ovdje je sve jednostavno nečuveno. Povezao sam bootstrap, postavio nekoliko stilova za sadržaj - i idemo!
@import url("bootstrap.css"); body ( background: #000; ) section.container ( position: absolute; top: 50px; bottom: 50px; width: 100%; overflow: auto;) section.container > section.item ( position: relative; float: left; margina: 0; padding: 0; visina: 140px; overflow: skriveno;) section.container > section.item > img (width: 100%;)

JS. Ovdje postaje zanimljivo. U početku sam funkcije pisao odvojeno, a kada je sve radilo, spojio sam ih u jednu klasu
GALERIJA = ( // postavite zadane parametre koji se mogu nadjačati tijekom inicijalizacije. spremnik: "section.container", // roditeljska stavka spremnika: "section.item", // odvojeni element galerije img: "section.item > img. skrivena ", // slika koju ćemo inicijalno "sakriti" interval: 200, // kašnjenje broja efekta prozirnosti: 5, // broj elemenata za dodavanje init: function(params) ( var _self = this; // Nadjačavanje parametri (ako su proslijeđeni. Ako nisu, upotrijebite zadane.) if(params != undefined)( for (var key in params) ( _self = params; ) ) return _self.setUp(); ), setUp: funkcija () ( var _self = this; // Prekidamo rukovatelje događajima. U našem slučaju, prozor treba ove (resize) $(window).bind("resize", function())( _self.adjust(); ) ); // ... za učitavanje stranice $(document).ready(function())( _self.adjust(); _self.play(); )); // ... za pomicanje u nadređenom bloku $( _self.container).bind("pomicanje", funkcija ()( _self.checkScroll(); )); ), // prilagodi širinu i broj elemenata u retku, ovisno o veličini prozora adjust: 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; $(_self.item).css(( "width" : itemWidth + "px" )) ; ), // Pokreni učinak postupnog pojavljivanja elemenata. Mala nijansa: skrivena klasa // za sliku potrebna je ne da bi je sakrila (metoda ispod će to učiniti), već da traži // prvi element svaki put kada se sadržaj ažurira. Ciklus način igre() prolazi // kroz sve slike sa skrivenom klasom (u početku je svatko ima), nakon primjene // efekta fadeIn(), uklanjajući klasu. Dakle, kod učitavanja novog sadržaja, ciklus počinje // ne od prvog elementa, već od prvog učitanog. // Prvi put sam se susreo s metodom queue(). play: function() ( var _self = this; var items = $(_self.container).find(_self.img); $(items).each(function(i) ( var cur = $(this).hide( ); $(document).queue("myQueue", function(n) ( cur.removeClass("hidden").fadeIn(_self.interval, n); )); )); $(document).dequeue(" myQueue"); ), // Stvarno učitavanje sadržaja. Ovdje je sve jednostavno: šaljemo zahtjev poslužitelju - primamo // novi sadržaj na stranici (ako postoji) i prikazujemo ga na samom kraju učitavanja roditeljskog bloka: function() ( var _self = this; $.ajax(( url: "/load .php", type: "POST", data: ("count": _self.count), dataType: "json", success: function(json) ( if(json) .output) ( $(_self.container).children ("div.clearfix").before(json.output); _self.adjust(); _self.play(); ) ) )); ), // Provjerite stanje pomicanja. Ako okomito pomicanje u nadređenom bloku // jednak maksimalnom mogućem - šaljemo zahtjev za novim sadržajem. // Dakle, učitavanje sadržaja će se izvršiti samo ako smo // skrolali stranicu do kraja. 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. Ovdje je sve primitivno, samo za probu.
$json = niz(); $html = ""; $items_on_page = !prazno($_POST["count"])? (int)$_POST["count"]: 5; za ($i = 0; $i< $items_on_page; $i++) { $html .= ""; ) $json["output"] = $html; echo json_encode($json);
Ovdje se samo jedan parametar prosljeđuje u $_POST (broj blokova koji se dodaju), ali možete dodatno proslijediti početnu točku, koristeći princip paginacije. Može se dobiti u JS koristeći:
var items = $(_self.container).find(_self.img); var start = items.length; // i proslijedite zahtjev: data: ("count": _self.count, "start": start), // ... zatim navedite..." LIMIT " prilikom dohvaćanja podataka. (int)$_POST["start"] . ", ". $items_on_page;

Tako je ispalo “paginacija bez paginacije”, ali na gumenoj stranici. Primjer rada ovdje.

U 2011. bilo je vrlo moderno (po mom mišljenju, ta je moda došla s Facebooka) stvoriti "beskonačno skrolanje" na svojim web stranicama: to je kada korisnik okreće i okreće kotačić miša, a sve nove rezultate pretraživanja učitava Ajax na dnu stranice, pretvarajući obično skrolanje u beskonačno i izazivajući “kognitivnu disonancu” kod korisnika koji se prvi put s time susreće.

Također sam nedavno vidio članak na ovoj stranici u kojem je autor izrazio svoje nezadovoljstvo "beskonačnim listanjem" i pozvao na korištenje starog dobrog "paginiranja".

Slažem se s autorom. I sama sam narkomanka, ponekad sjedim za monitorom, očarana, staklenih očiju, vrtim, vrtim, vrtim čarobni kotač, ne mogu na posao/na posao/u trgovinu/jedem/pijem/na WC , i vrtim ga s jednom jedinom mišlju: “Pa kad će ti sve završiti?!” (Što možeš - navikao sam završavati stvari).

Jedno jutro sam ustao i čvrsto odlučio: “Prestani to trpjeti!”

Predstavljam vam moj mali scenarij, koji sam nedavno napisao za svoj “ društvena mreža"(sa blackjackom i kurvama).

Da biste vidjeli demo, preuzmite arhivu i pokrenite datoteku “test/test.html”.

Koje inovacije nudi ova skripta:

Budući da su glavnu "kliznu traku" pretvorili u nešto nejasno, moramo vratiti normalnu "kliznu traku", što smo i učinili crtanjem sive trake na desnoj strani stranice, odmah lijevo od obične "klizne trake".

Dokle je dosegla ova traka na vrhu je koliko smo uzoraka rezultata već pregledali. Općenito, ova traka je nekako crna. Tamo gdje je sivo je mjesto u cijelom uzorku gdje se sada nalazimo.

Također imajte na umu da se adresa stranice mijenja kako se pomičete. Tako da možete skrolati do polovice ove večeri, označiti stranicu, isključiti računalo, otići u krevet, probuditi se ujutro, uključiti računalo, otići na stranicu koju ste jučer označili prije spavanja i nastaviti skrolati iz na istom mjestu na kojem si bio. I, štoviše, možete se pomicati s ovog mjesta ne samo naprijed, već i unatrag.

A glede navigacije na bilo koji željenu stranicu: Ovdje možete doći do bilo koje stranice - samo zamijenite broj stranice za odabir koji vam je potreban u adresu web stranice. Budući da su ljudi čitljivi URL-ovi sada standardni, ovo bi trebalo biti održivo rješenje.

Ovaj scenarij očito nije nešto uklesano u granit, a pola sam ga prepisao kad sam jutros ustao. Međutim, čini se da je izvedba stabilna i testirana je u najnovijem Chrome verzije i FireFox. Odmah ću reći: ne jurim za "kompatibilnošću s više preglednika" - uvijek se može dovršiti ako netko želi koristiti ovu skriptu na svojoj web stranici "s više preglednika".

Čini se kao sve, demo govori sam za sebe. Objava izaziva komentare.

Što se još može učiniti (na temelju komentara):

Kada kliknete bilo gdje na traci, idete na odgovarajuću stranicu za odabir.

Uklonite podatkovne stranice s vrha web-stranice kada ima previše podataka na web-stranici (kako ne bi usporavali).

Primjeri poboljšanog "beskonačnog pomicanja".

Prošlo je dosta vremena otkako sam objavio bilo kakav kod. Danas ću ispraviti situaciju i dati vam nekoliko korisnih jQuery isječaka koji će vam svakako dobro doći na vašim web stranicama.

Neću ulaziti u teoriju, sva jQuery dokumentacija nalazi se na službenim stranicama knjižnice. Samo ću vas podsjetiti što je jQuery.

jQuery je JavaScript biblioteka koja se fokusira na interakciju JavaScripta i HTML-a. Knjižnica jQuery pomaže vam da lako pristupite bilo kojem DOM elementu, pristupite i manipulirate atributima i sadržajem DOM elemenata. Knjižnica jQuery također nudi praktičan API za rad s AJAX-om.

Pa, idemo!

1. Glatko pomicanje na vrh stranice

Niti jedna web stranica ne može bez njega. Samo 4 retka koda omogućit će vašim posjetiteljima glatko pomicanje cijele stranice prema gore jednim klikom.

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

2. Duplicirana zaglavlja tablice

Da biste poboljšali percepciju i čitljivost svojih tablica, možete duplicirati njihova naslova ispod tablice. Čini se kao mala stvar, ali vrlo je prikladno u složenim i velikim stolovima koji ne stanu na jedan zaslon.

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

3. Učitavanje vanjskih podataka

S koristeći jQuery Vrlo je jednostavno učitati vanjski sadržaj na web stranice. Može se poslati izravno u DIV blok, kao u donjem primjeru.

$("#content").load("somefile.html", function(response, status, xhr) ( // obrada pogreške if(status == "error") ( $("#content")).html(" Dogodila se pogreška: " + xhr.status + " " + xhr.statusText); ) ));

4. Ista visina zvučnici

Poznato je da poravnanje blokova po visini sa standardom koristeći HTML a CSS nije tako jednostavan. Samo nekoliko redaka koda u nastavku omogućit će vam da visina svih blokova bude jednaka visini većeg bloka.

var maxheight = 0; $("div.col").each(function())( if($(this).height() > maxheight) ( maxheight = $(this).height(); ) )); $("div.col").visina(maxvisina); 5. Stolna zebra

Kao što znate, percepcija i čitljivost tablice bit će znatno veća ako napravite višebojnu izmjenu redaka. Ovo je vrlo lako implementirati u jQuery.

$(dokument).ready(function())( $("table tr:even").addClass("stripe"); ));

6. Djelomično ažuriranje stranice

Koristeći jQuery, vrlo je jednostavno implementirati blok (djelomično) osvježavanje stranice. Na primjer, kod u nastavku omogućit će vam automatsko osvježavanje bloka #refresh svakih 10 sekundi.

SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // milisekundi za čekanje

7. Prethodno učitavanje slika

Ovaj kod vam omogućuje učitavanje slika u pozadina bez učitavanja tijekom pregledavanja stranice. Samo u retku 7 navedite slike koje trebate za predučitavanje.

$.preloadImages = function() ( for(var i = 0; i maxWidth)( ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", visina * omjer); visina = visina * omjer; ) var width = $(this).width(); var height = $(this).height(); if(height > maxHeight)( ratio = maxHeight / height; $ (ovo).css("visina", maxVisina); $(ovo).css("širina", širina * omjer); širina = širina * omjer; ) )); //$("#contentpage img").show(); // PROMJENA VELIČINE SLIKE ));

12. Učitavanje sadržaja prilikom pomicanja stranice prema dolje

Češće se ova tehnika naziva beskonačnim pomicanjem. Sadržaj se učitava dok se korisnik pomiče po stranici. Ovo je prilično jednostavno implementirati pomoću donjeg koda.

Var loading = false; $(window).scroll(function())( if((($(window).scrollTop()+$(window).height())+250)>=$(document).height())( if ( loading == false)( loading = true; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max") . val(), function(loaded)( $("body").append(loaded); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ ("#loadingbar").css("display","none"); učitavanje = false; )); ) ) )); $(dokument).ready(funkcija() ( $("#loaded_max").val(50); ));

13. Provjera učitavanja slike

Često morate provjeriti je li slika učitana ovaj trenutak ili ne. A jQuery će nam opet pomoći u tome.

Var imgsrc = "img/image1.png"; $(" ").load(function () ( alert("slika je učitana"); )).error(function () ( alert("greška pri učitavanju slike"); )).attr("src", imgsrc);

14. Sortiranje po abecedi

Ako trebate dinamičko sortiranje popisa po abecedi, ovaj mali isječak će vam sigurno pomoći.

$(function() ( $.fn.sortList = function() ( var mylist = $(this); var listitems = $("li", mylist).get(); listitems.sort(function(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(); });

Sačuvajte – dobro će vam doći.

Sve najnovije i najzanimljivije iz svijeta WordPressa na mom Telegram kanalu. Pretplatite se!