Stranica se učitava bez ponovnog učitavanja. Ajax učitava Bitrix sadržaj. Dodavanje primljenih podataka na stranicu
Ajax učitavanje sadržaja, beskonačno skrolovanje, "web stranica" - ovaj pristup se drugačije naziva, ali suština je ista - pri skrolovanju do kraja liste automatski se učitava više sadržaja. U ovom članku ću opisati jednostavan pristup implementaciji ovoga.
Članak će razmotriti najjednostavnija lista elemenata jedan ispod drugog, na čijem kraju se obično očekuje stranica ili dugme "više". Ovisno o vanjskim divovima, lukavom rasporedu ili bilo čemu već, morat ćete sami malo podesiti šablon, ali suština je ista.
U ovom vodiču ćemo pogledati kako ubrzati korisničko iskustvo na malim statičnim stranicama koristeći nekoliko različitih metoda. Način na koji ćemo to uraditi je da ponovo učitamo stranicu. Zato samo dodajte kada korisnik koristi neke navigacijske veze, samo se glavni sadržaj stranice mijenja i pretraživač ne učitava stranicu ponovo.
Učitavanje eksternih podataka
Oba imaju svoje prednosti i nedostatke, koje ćemo također razmotriti. Prvo ćemo pogledati postavljanje stranice. Međutim, kod ove prve metode postoji jedna linija koja je važna, a to je. Ovo sakriva sve "stranice" osim prve. Stoga se stranica obično pojavljuje pri prvom učitavanju.
Prije svega, postavimo ovaj šablon za navigaciju na stranicu /bitrix/templates/.default/components/bitrix/system.pagenavigation. Ovo je običan šablon stranice, veoma skraćen, u njemu smo ostavili samo dugme "sledeća stranica", nazvavši ga "još". Ovo je jednostavnost pristupa. Neću uključiti kod ovdje.
Ovaj kod je podijeljen u dva dijela, prvi je ono o čemu smo upravo govorili. Ono što ovo radi je da korisnik može ponovo učitati stranicu nakon što ode na "stranicu", a osvježavanje će ga poslati tamo, a ne nazad na prvu stranicu, što često može biti problem sa ovakvim sistemom. Dakle, ovo je kraj prve metode, ovo rezultira funkcionalnim statičnim sajtom sa trenutnom razmjenom sadržaja i ponovnim učitavanjem stranica. Jedina mana ove metode je činjenica da se sav sadržaj poziva na bootstrap pošto je prisutan u indeksnoj datoteci.
Sada pogledajmo predložak naših elemenata. U prilagođenom šablonu, u datoteci result_modifier.php (ako ne postoji, morate je kreirati), dodajemo takav kod koji resetuje bafer stranice ako postoji ajax poziv.
if (array_key_exists("is_ajax", $_REQUEST) && $_REQUEST["is_ajax"]=="y") ( $APPLICATION->RestartBuffer(); )
Na istom mjestu u datoteci component_epilog.php (ako nije, kreirajte je), dodajte kod (ako ovaj fajl ne učestvuje u komponenti, onda ga zalijepite na samom dnu template.php):
if (array_key_exists("is_ajax", $_REQUEST) && $_REQUEST["is_ajax"]=="y") ( die(); )
Ovdje, ako postoji ajax zahtjev, zaustavljamo izvršenje. Za one koji su još uvijek zbunjeni u Bitrixu: CIJELA stranica se traži preko ajaxa, ali dobijamo upravo onaj dio sadržaja koji je generirala naša komponenta liste.
I također na mjesto koje vam odgovara (na primjer, u skripte predloška stranice), dodajte sljedeći js kod:
To može postati problem sa fotografijama i dodatnim sadržajem, zbog čega je potrebno malo duže učitavanje prve stranice. Zato pogledajmo drugi način za postizanje istog efekta koji može riješiti ovaj problem. To znači da će se struktura datoteke za naš projekat promijeniti da izgleda ovako.
Sada će izgledati otprilike ovako. Evo prve funkcije u kodu. Pa hajde da objasnimo šta se dešava. Onda da to odjednom zaustavimo, sve ćemo sakriti i onda nestati. Nakon toga, stranica bi trebala izgledati onako kako želite, ali uglavnom raditi ispravno.
$(document).on("ready", function()( var loading = false; $(window).scroll(function() ( if ($("#infinity-next-page").size() && ! učitavanje) ( if ($(window).scrollTop()+100 >= $(document).height()-$(window).height()) ( loading = true; $.get($("#infinity- next-page").attr("href"), (is_ajax: "y"), function(data)( $("#infinity-next-page").after(data); $("#infinity-next -stranica").remove(); loading = false; )); ) ) )); ));
I ovdje je sve vrlo jednostavno: pri skrolovanju, ako dođete do podnožja (tamo možete podesiti deltu, ako ne radi baš na vrijeme), onda potražite baš taj link “više”, uzmite adresu s njega i pristupite ovoj adresi preko ajax-a, umetnite sadržaj upravo tamo i izbrišite prethodno dugme.
To je tako jednostavno. Napominjem da je pristup optimiziran za seo, jer će pretraživač jednostavno vidjeti dugme "više", kliknuti na njega, već će biti druga stranica i tako dalje. Ako želite, ovo možete sami sakriti od tražilice (atribut). Jedino što bih savjetovao je da u robots.txt umetnete sljedeći red: Disallow: /*is_ajax=* (kako Ajax stranice ne bi bile indeksirane od strane tražilice).
Blokirajte u cijelom prozoru preglednika
Mijenja sadržaj bez ponovnog učitavanja stranice. I na taj način ionako ne treba pozivati sav sadržaj pri učitavanju početne stranice! Nadam se da ste naučili korisnu tehniku iz ovog tutorijala i da je možete koristiti da na neki način poboljšate svoj projekat.
Možete pregledati i/ili pogledati izbliza. Jeste li koristili sličnu metodu da ubrzate svoju web stranicu? Postoji mnogo različitih metoda koje mogu upariti jednu situaciju s drugom. Pretraživač šalje zahtjev u pozadini i nakon uspjeha ili greške pokreće se povratni poziv i tada se podaci mogu prikazati ili koristiti.
To je sve. Ne zaboravite da pristup koristi jQuery biblioteku.
U procesu korištenja ispostavilo se da način uređivanja za učitane elemente ne radi. Ako vam je ovo važno, morate učiniti sljedeće. Nemojte koristiti drugi deo koda iz ovog posta, već u footer.php šablona sajta na samom vrhu ubacite:
if (array_key_exists("is_ajax", $_REQUEST) && $_REQUEST["is_ajax"]=="y") ( return; )
27. januara 2014 7 769 4
Ako iz nekog razloga trebate preuzeti podatke s druge domene, trebate kreirati proxy na strani servera kako biste prevarili pretraživač da čita podatke s lokalne domene. Kod za ovaj primjer je u bilješkama o emisiji. Kao što vidite imamo galeriju slika sa 5 slika. Ovo ostavlja predložak stranice iza sebe i jednostavno mijenja sliku i bilo koji dodatni sadržaj.
Želimo da zamijenimo sliku i natpis bez preuzimanja nova stranica. Kreirajmo oznaku skripte za smještaj našeg koda. U našoj anonimnoj funkciji, moramo učitati putanju sa veze. Stoga moramo odabrati sadržaj koji želimo unijeti.
Prošlo je dosta vremena otkako sam objavio bilo koji kod. Danas ću ispraviti situaciju i dati neke korisne jQuery isječke koji će vam sigurno trebati na vašim stranicama.
Neću ulaziti u teoriju, sva jQuery dokumentacija je na službenoj web stranici biblioteke. Samo ću vas podsjetiti šta je jQuery.
jQuery je JavaScript biblioteka koja se fokusira na interakciju između JavaScripta i HTML-a. Biblioteka jQuery olakšava pristup bilo kojem DOM elementu, pristup atributima i sadržaju DOM elemenata i manipulisanje njima. Biblioteka jQuery takođe pruža zgodan API za rad sa AJAX-om.
Glatko skrolovanje do vrha stranice
Ako želimo da se ime zamijeni, moramo ići drugim putem. Kao što možete vidjeti, imamo slike elemenata korijenskog elementa i pet slika koje sadrži sa njihovim odgovarajućim naslovima i izvorima. Izbrišemo naš kod od početka i započnemo novi.
to DOBRA IDEJA za pohranjivanje elemenata koje ćete uvijek iznova koristiti u varijablama. Da bismo učitali slike, prvo moramo proslediti "image" kao element i proslediti podatke kao drugi argument za kontekst.
Pa idemo!
1. Glatko skrolovanje do vrha stranice
Nijedna web stranica nije potpuna bez toga. Samo 4 linije koda omogućit će vašim posjetiteljima da jednim klikom glatko skroluju cijelu stranicu prema gore.
$("a").click(function() ( $("html, tijelo").animate(( scrollTop: 0 ), "sporo"); vrati false; ));
2. Duplicirana zaglavlja tablice
Da biste poboljšali percepciju i čitljivost vaših tabela, možete duplirati njihove naslove ispod tabele. Činilo bi se sitnica, ali vrlo je zgodna u složenim i velikim stolovima koji ne stanu na jedan ekran.
Sada ovo možemo koristiti za popunjavanje naslova slike i naslova stranice. Kada osvježimo stranicu, vidjet ćete da se sva tri željena elementa, slika, naslov i naslov stranice, dinamički ažuriraju. Također može unijeti zabunu u prebacivanje između različitih dokumenata koje prelazite.
Tada možemo pristupiti našim atributima kroz notaciju tačaka. Sada je kod čišći i lakši za čitanje. Ne morate specificirati parove ključ/vrijednost. Drugi argumenti se mogu proslijediti ovoj metodi. Kada provjerimo kod u pretraživaču, vidimo da smo dobili željenu funkcionalnost.
$tfoot = $("
"); $($("thead").clone(true, true).children().get().reverse()).each(function()( $tfoot.append($(ovo)); ) ); $tfoot.insertAfter("table thead");3. Učitavanje eksternih podataka
Uz jQuery, vrlo je lako učitati vanjski sadržaj na web stranice. Može se prikazati direktno u DIV bloku, kao u primjeru ispod.
$("#content").load("somefile.html", function(response, status, xhr) ( // rukovanje greškom if(status == "error") ( $("#content").html(" Došlo je do greške: " + xhr.status + " " + xhr.statusText); ) ));
Svi oni uzimaju iste argumente, ali su za različite vrste zahtjeva. Nakon što se učita, bit će izvršena. Kada ga otvorite u uređivaču, vidjet ćete pasus sa id "greška" i drugi pasus sa id "učitavanje".
Došlo je do greške. Molimo pokušajte ponovo kasnije! Uvijek je dobra ideja da se korisnicima da jasno povratne informacije o napretku onoga što se dešava u vašoj aplikaciji. Na primjer, dobra je ideja prikazati poruku ili sliku za stvari koje se obrađuju u pozadini ili prikazati poruku o grešci ako postoji problem.
4. Jednaka visina stuba
Poznato je da se blokovi poravnavaju po visini standardnim sredstvima HTML i CSS nisu tako laki. Samo nekoliko redova koda ispod će vam omogućiti da visinu svih blokova učinite jednakom visini većeg bloka.
varmaxheight = 0; $("div.col").each(function()( if($(this).height() > maxheight) (maxheight = $(this).height(); ) )); $("div.col").height(maxheight);
5. Tablična zebra
Kao što znate, percepcija i čitljivost tablice bit će znatno veća ako napravite izmjenu redova u više boja. Ovo je vrlo lako implementirati uz jQuery.
Sada ažurirajmo naš pretraživač. Odlično, vidimo našu poruku o grešci kao što smo očekivali. Sada uklonimo 1 i ažuriramo. Sada kada je naziv datoteke ispravan, poruka o grešci se ne prikazuje. Kao što smo već uradili, hajde da keširamo ove elemente koje ćemo koristiti.
Želimo da povežemo anonimnu funkciju sa rukovaocem slanja obrasca. Prije podnošenja zahtjeva, pokažimo paragraf za učitavanje. Međutim, nismo sakrili paragraf "učitavanja" po završetku. To radimo jednostavnim kreiranjem anonimne funkcije za puni ključ. Ova funkcija se izvršava nakon uspješnog povratnog poziva i greške. To je tačno kada želimo sakriti našu stavku za učitavanje.
$(document).ready(function()( $("table tr:even").addClass("stripe"); ));
6. Djelomično osvježavanje stranice
Uz jQuery je vrlo lako implementirati blok (djelimično) osvježavanje stranice. Na primjer, kod u nastavku će vam omogućiti da automatski ažurirate #refresh blok svakih 10 sekundi.
SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // milisekunde za čekanje
7. Predučitavanje slike
Ovaj kod vam omogućava da učitate slike u pozadini bez učitavanja dok gledate stranicu. Samo navedite u redu 7 slike koje trebate unaprijed učitati.
Jednaka visina stuba
To se dešava vrlo brzo pošto su naši upiti na našoj lokalnoj mašini. Međutim, u proizvodnom okruženju, ovo će trajati duže da se prikaže, ovisno o brzini veze i obrade na serveru. Ali prikazivanje takve poruke o pokretanju zaista informiše korisnika, što je uvijek važno.
Naravno, strategije će se razlikovati od projekta do projekta, ovisno o ograničenjima ili zahtjevima. Hvala vam na izdvojenom vremenu i nadamo se da ćete uživati u korištenju novih vještina. Ako imate pitanja, povratne informacije ili sugestije, kontaktirajte nas.
$.preloadImages = function() ( for(var i = 0; i Ovaj isječak prisiljava sve vanjske veze na stranici da se otvore u novom prozoru preglednika. Skripta jednostavno određuje trenutni domen stranice i radi ako se ne poklapa s adresom u linku. Korisnici mrze čekanje, pa evo nekoliko metoda koje možete koristiti za izrezivanje svojih stranica. Da biste provjerili da li je datoteka potpuno učitana, možete učiniti nešto poput. U tom slučaju, keš memorija će isteći za nekoliko sekundi ili 3 dana. Budite oprezni kada ovo koristite za svoje datoteke, posebno ako su u razvoju. Pošto je ime datoteke drugačije, pretraživač traži novu verziju. Podešavanje keš memorije pretraživača ne ubrzava početno učitavanje, ali može pomoći ako se vaša stranica povezuje na iste datoteke na više stranica ili ponavlja posjetitelje. Vaš pretraživač može istovremeno imati samo toliko konekcija na otvorenu web stranicu - s dodatnim troškovima za postavljanje svake veze, ima smisla kombinirati nekoliko malih skripti u veću. Ali ne morate ručno kombinovati fajlove! $("a").each(function() (var a = new RegExp("/" + window.location.host + "/"); if(!a.test(this.href)) ( $(ovo ).click(function(event) ( event.preventDefault(); event.stopPropagation(); window.open(this.href, "_blank"); )); ) )); Ova skripta će vam pomoći da rastegnete blok da ispuni ekran pretraživača. Odlično za modalne prozore i dijaloge. var winWidth = $(window).width(); var winHeight = $(window).height(); $("div").css(( "width": winWidth, "height": winHeight, )); $(window).resize(function()( $("div").css(( "width": winWidth, "height": winHeight, )); )); Koristite skriptu za spajanje datoteka - pogledajte dio 2 za primjer skripte za ovo. Ogromne datoteke je teško uređivati – lijepo je razbiti svoju biblioteku na manje komponente koje se kasnije mogu kombinovati, baš kao što razbijete program na manje module. Svi smo to vidjeli - najvjerovatnije najčešći i tipični primjer je dugme "učitaj više", koje prikazuje novi sadržaj bez stvarnog ponovnog učitavanja stranice. Pogledajte primjere u nastavku i inspirirajte se za svoj sljedeći projekat! Ako posjetiteljima vaše stranice dopustite da postavljaju vlastite lozinke, bilo bi dobro da kontrolirate njenu složenost i obavijestite posjetitelja o tome. Prvo, napišimo HTML dio koda:
A uz pomoć koda ispod provjerit ćemo unesenu lozinku i posjetitelju prikazati informacije: njegova lozinka je složena, srednja ili slaba, te provjeriti da li je prekratka. Pogledajmo neke stvarne primjere sa kojima se svako od nas svakodnevno susreće. Kada kupujete online, ponekad možete primijetiti da se u nekim web trgovinama stranica na kojoj se nalazite ne učitava ponovo kada dodate artikal u korpu. Ovako znate da iako stranica nije ponovo učitana, server je dobio obavijest da se u korpi nalazi novi proizvod. Vaš artikal će ostati u vašoj korpi čak i ako isključite računar prije kupovine. $("#pass").keyup(function(e) (var strongRegex = new RegExp("^(?=.(8,))(?=.*)(?=.*)(?=.*) (?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.(7,))(((?=.*)(?=.*) )|((?=.*)(?=.*))|((?=.*)(?=.*))).*$", "g"); var dovoljnoRegex = new RegExp("( ?=.(6,)).*", "g"); if (false == dovoljnoRegex.test($(this).val())) ( $("#passstrength").html("Više znakova "); ) else if (strongRegex.test($(this).val())) ( $("#passstrength").className = "ok"; $("#passstrength").html("Jako!" ); ) else if (mediumRegex.test($(this).val())) ( $("#passstrength").className = "alert"; $("#passstrength").html("Medium!") ; ) else ( $("#passstrength").className = "error"; $("#passstrength").html("Slab!"); ) return true; )); "Lijeno učitavanje" je zajednički naziv za metode učitavanja slika ili web sadržaja kada su potrebni, umjesto da ih se odmah prikazuju. Na primjer: Možda imamo prilično veliku stranicu punu fotografija i filmova, a problem je što se sporo učitava. Ovo rješenje je vjerovatno najčešće na društvenim mrežama. Okno za paginaciju nam nije dostupno: ne možemo vidjeti na kojoj smo stranici i koliko stranica ukupno. Naravno, logičnije je promijeniti veličinu slika na strani servera pomoću PHP-a i GD-a, ali postoje situacije kada to treba učiniti na strani klijenta. A jQuery će nam opet pomoći u tome. $(window).bind("load", function() ( $("#product_cat_list img").each(function() (var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $( this).width(); var visina = $(ova).height(); if(width > maxWidth)(omjer = maxWidth / width; $(this).css("width", maxWidth); $(ovo) .css("visina", visina * omjer); visina = visina * omjer; ) var širina = $(ovo).width(); var visina = $(ova).height(); if(visina > maxHeight)( omjer = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; ) )); //$( "#contentpage img").show(); // PROMENA VELIČINE SLIKE )); Ova tehnika se često naziva beskonačnim pomicanjem. Sadržaj se učitava dok korisnik pomiče stranicu. Ovo je dovoljno lako implementirati pomoću koda ispod. 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"); loading = false; )); ) ) )); $(document).ready(function() ( $("#loaded_max").val(50); )); Često se dešava da morate provjeriti učitanu sliku ovog trenutka ili ne. A jQuery će nam opet pomoći u tome. Var imgsrc = "img/image1.png"; $("").load(function () ( alert("image loaded"); )).error(function () ( alert("greška učitavanja slike"); )).attr("src", imgsrc); Ako trebate dinamički sortirati listu po abecednom redu, ovaj mali isječak će vam svakako pomoći. $(function() ( $.fn.sortList = function() (var mylist = $(ovo); 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();
});8. Otvaranje vanjskih veza u novim prozorima/karticama
9. Blokirajte u cijelom prozoru pretraživača
Beskonačno učitavanje postova pri skrolovanju stranice
Opciju obrađujemo kada se podaci završe
10. Provjera složenosti lozinke
Da, možemo imati funkcionalnu paginaciju koja ne učitava ponovo cijelu stranicu. 
Opet, server odgovara podacima i skripta ih prikazuje. 
Ovo je veliki korak naprijed u smislu korisničkog iskustva jer čini aplikacije mnogo bržim i bogatijim. Međutim, povećanje dinamike vaše aplikacije ima veliku cijenu: web indekseri ne mogu vidjeti dinamički generirani sadržaj. Kao rezultat toga, najažurnije aplikacije su i one koje se često najmanje mogu pretraživati.Dodavanje primljenih podataka na stranicu
Jednostavnija verzija beskonačnog skrolovanja je "učitaj više". Ponekad kada skrolujemo do dna ove zamišljene prve stranice, možemo vidjeti dugme "učitaj više".11. Promjena veličine slike pomoću jQueryja
12. Učitavanje sadržaja prilikom pomicanja stranice prema dolje
13. Potvrdite otpremanje slike
14. Sortiraj po abecednom redu
