Cum să faci un preîncărcare GIF cu întârziere. Facem un preîncărcare JS cu drepturi depline pentru o aplicație AJAX. Etapele creării unui preîncărcare

Crearea de preîncărcătoare a devenit foarte la modă, deoarece arată frumos și, cel mai important, obligă utilizatorul să nu părăsească site-ul în timp ce acesta încă se încarcă.

Cum să faci un preîncărcare pentru un site web?

Încărcătorul în sine poate fi realizat în doar câteva secunde dacă utilizați soluții gata făcute sau în câteva minute dacă scrieți totul singur de la zero :)

Dar să luăm lucrurile în ordine...

Esența browserului este că afișează codul pas cu pas. Aceasta înseamnă că browserul parcurge tot codul de sus în jos, iar dacă undeva în mijlocul codului întâlnește scripturi JS grele, site-ul se va îngheța puțin în acest moment.

Preloader face astfel încât să ascundem tot conținutul site-ului și să îl afișăm complet numai atunci când întregul site este încărcat cu toate scripturile și stilurile.

Scurtă diagramă a modului în care funcționează preîncărcătorul:

• Literal, imediat după eticheta de deschidere a corpului, plasăm un div cu un preîncărcare;
• Activați preîncărcarea și ascundeți tot conținutul paginii;
• După încărcarea paginii, eliminați preîncărcarea și afișați site-ul.

Acum să ne uităm la cod. Inițial trebuie să plasați un div cu un preloader, ceva de genul acesta:

AreaForLoader ( fundal: gradient liniar (90deg, #FF4E50 10%, #F9D423 90%); overflow: ascuns; poziție: fix; stânga: 0; sus: 0; dreapta: 0; jos: 0; z-index: 9999 ;)

Ultimul lucru pe care trebuie să-l faceți este să ascundeți preîncărcătorul. Pentru a face acest lucru, puteți utiliza următorul cod jQuery:

$(fereastră).on(„încărcare”, funcția () ( $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader. delay(350).fadeOut(„lent”); ));

Practic, tot ce trebuie să faci este să adaugi niște animații frumoase la preîncărcările tale. De asemenea, am găsit câteva exemple interesante de preîncărcătoare, așa că poate doriți să le verificați:

Crearea unui preîncărcare folosind plugin-uri

Există și alte modalități de a crea preîncărcătoare și bare de încărcare. De exemplu, puteți utiliza pluginul special NProgress.js pentru a crea o bară de încărcare frumoasă sau puteți utiliza designerul de preîncărcare.

Aceste două lucruri sunt descrise perfect în tutorialul video despre crearea unui preîncărcare, așa că vă sfătuiesc să urmăriți acest tutorial video:

Preloader $(document).ready(function () ( NProgress.start (); NProgress.set (0.4); setTimeout(function () ( NProgress.done (); ), 4000); )); #hellopreloader>p(display:none;)#hellopreloader_preload(afișare: bloc;poziție: fix;z-index: 99999;sus: 0;stânga: 0;lățime: 100%;înălțime: 100%;min-lățime: 1000px ;background: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) center center no-repeat;background-size:131px;)

Bună ziua-Site.ru. Creator de site-uri web gratuit.

var hellopreloader = document.getElementById("hellopreloader_preload");funcția fadeOutnojquery(el)(el.style.opacity = 1;var interhellopreloader = setInterval(function())(el.style.opacity = el.style.opacity - 0,05; dacă (el.style.opacitate

2. Creați stiluri CSS pentru blocul div și elementul i (pictogramă).

#inainte de incarcare ( pozitia: fix; /*pozitia fixa a blocului*/ stanga: 0; /*pozitia elementului in stanga*/ sus: 0; /*pozitia elementului in sus*/ dreapta: 0 ; /*pozitia elementului in dreapta*/ jos : 0; /*pozitia elementului in jos*/ fundal: #fff; /*culoarea fundalului blocului*/ z-index: 1001; / *plasați-l deasupra tuturor elementelor din pagină*/ ) #before-load i ( dimensiunea fontului: 70px; /*dimensiunea pictogramei*/ poziția: absolută; /*poziția absolută, poziționată în raport cu strămoșul său cel mai apropiat*/ stânga: 50 %; /*stânga 50% din lățimea blocului părinte*/ sus: 50%; /*sus 50% din înălțimea blocului părinte*/ marginea: -35px 0 0 -35px; /*offset pictograma astfel că este centrat*/ ) 3. Adăugați un script care ascunde preîncărcarea după ce pagina se încarcă (adică când se încarcă obiectul fereastră ): $(window).load(function() ( $("#before-load")). find("i").fadeOut().end().delay(400).fadeOut("lent"); ));

Dacă doriți să utilizați o imagine gif animată ca indicator de preîncărcare, atunci trebuie să faceți următoarele modificări la pașii de mai sus:

Eliminați clasele Font Awesome din codul HTML:

Faceți următoarele modificări stilurilor CSS (schimbați regula #before-load i (..)):

#before-load i ( lățime: 70px; /*lățimea imaginii gif*/ înălțimea: 70px; /*înălțimea imaginii gif*/ poziție: absolut; stânga: 50%; sus: 50%; fundal: url( „assets /images/img.gif”) fără repetare 50% 50%; /*locația (url) imaginii gif și alți parametri*/ marjă: -35px 0 0 -35px; )

Puteți descărca imagini gif animate pentru site-ul dvs. din resursa http://preloaders.net/ sau puteți utiliza această arhivă.

Dacă folosiți sau nu un preîncărcare pe un site web este o întrebare individuală. De exemplu, pentru un site web de o pagină cu o cantitate minimă de grafică și imagini, așa ceva nu este necesar.

Să luăm în considerare cealaltă extremă - un site web pentru a comanda pizza. Majoritatea vizitatorilor comandă pizza de pe telefonul mobil - și asta înseamnă o viteză mai mică de încărcare a site-ului în principiu și plus fotografii. Un preloader pentru astfel de site-uri va fi foarte util; vizitatorii nu vor vedea procesul inestetic de formare a paginii.

Acum vom crea un preloader rotativ clasic în CSS pur folosind proprietățile de animație.

Să creăm un cod HTML simplu constând dintr-o etichetă div goală cu clasa de încărcare, fără a număra eticheta body, desigur.

Vom scrie tot restul codului în fișierul de stiluri. Începutul va aduce aminte de o lecție de geometrie școlară - cunoașterea formelor.

Stiluri pentru clasa de încărcător

Mai întâi, desenați un pătrat gri cu o linie continuă de 2 pixeli grosime:

Încărcător(
chenar: 2px solid #eae4ea;
}

cu lățimea și înălțimea de 150 pixeli:

Încărcător(
latime: 150px;
înălțime: 150px;
}

Cu o singură linie de cod, pătratul a devenit un cerc:

Raza de frontieră: 50%;

Creați o umbră translucidă pentru cerc:

Box-shadow: 0 -2px 2px rgba(0,0,0,.2);

Și să pictăm rama de jos în verde:

Chenar-partea de jos: 2px solid #6ddfca;

Să găsim propriul nostru nume pentru animație; cercul va face o revoluție completă uniform în 3 secunde, rotindu-se la nesfârșit până când pagina se încarcă.

Animație: încărcător 3s liniar infinit;

Pseudo-elemente:inainte si:dupa

Un cerc este bun, dar trei cercuri sunt mai bune, mai ales că două dintre ele vor fi „false” - numai în stiluri, deoarece pseudoelementele oferă această oportunitate.

Desenați un pseudo-cerc intern înainte în interiorul cercului real, cu 20 de pixeli (10px+10px) mai mic în diametru

Încărcător: înainte (
continut: "";
poziție: absolută;
sus: 10px;
stânga: 10px;
jos: 10px;
dreapta: 10px;
}

cu un cadru de jos roz și se va învârti mai repede decât cercul principal.

Încărcător: înainte (
chenar-jos: 2px solid #d355be;
animație: încărcător 2s liniar infinit;
}

Acum ține de cercul de după, deși el este cel mai mic, este cel mai rapid, în 1 secundă va face o întoarcere completă și are o dungă mov frumoasă.

Încărcător: după (
chenar-jos: 2px solid #8c23ec;
animație: încărcător 1s liniar infinit;
}

Indentarea cercului de după din cercul principal este de 22 de pixeli.

Sus: 22px;
stânga: 22px;
jos: 22px;
dreapta: 22px;

Animație după cadre @keyframes

Este timpul să începem cercurile noastre, acest lucru se face prin proprietatea transform: rotate - ceea ce înseamnă rotație. 0% este începutul, iar 100% este finalul. Fiecare cerc se va roti la 360 de grade.

Mulți programatori optimizează codul JavaScript și CSS pentru a face pagina să se încarce mai rapid.
Dar nu toate fac preîncărcare, care oferă utilizatorului efectul unei încărcări subiectiv mai rapide.

Metoda numărul 1. Ieftin și vesel.
Ideea este simplă - trebuie să plasați o imagine în centru care să arate utilizatorului că pagina încă se încarcă. Codul este destul de simplu, scriem imediat după:

< div id ="preloaderbg" class ="centerbg1" >

< div class ="centerbg2" >

< div id ="preloader" >

< script type ="text/javascript" >

document .getElementById("preloaderbg" ).style.display = "blocare" ;

.centerbg1 (

afișaj: niciunul;

latime:100%;

inaltime:100%;

poziție: absolută;

sus: 0px;

stânga: 0px;

indicele z: 1000;

fundal: url("/design/im/texture1.jpg" ) #3c363e;

.centerbg2 (

poziție: absolută;

stânga: 50%;

sus: 50%;

#preloader (

sus: -50%;

stânga: -50%;

poziție: relativă;

lățime: 333px;

înălțime: 26px;

fundal: url();

chenar: solid #edda3d 2px;

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Drept urmare, imediat după încărcare, apare un bloc cu o bară de progres animată în centrul paginii. Parametrul de depășire trebuie modificat astfel încât să nu apară o bară de defilare și utilizatorul să nu poată derula în jos și să se uite la conținutul paginii.

Apoi, când totul s-a încărcat, trebuie să eliminați preîncărcătorul și să setați overflow la vizibil.

document .body.style.overflow = "vizibil" ;

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Am plasat această parte a codului într-un fișier cu funcții JS, plreloader1.js

Dacă faceți o bară de progres dintr-o imagine GIF animată, aceasta se poate dovedi a fi prea grea, uneori chiar mai mare decât pagina în sine în care este plasată.
Prin urmare, este mai bine să desenați o bandă (de exemplu, așa), să o puneți ca fundal al blocului cu ID preloader și să mutați poziția de fundal în funcție de cronometru.

document .getElementById("loaderbg" ).style.display = "blocare" ;

document.body.style.overflow = "ascuns" ;

pbPos = 0;

pbInt = setInterval(funcție () (

document .getElementById("preloader" ).style.backgroundPosition = ++pbPos + "px 0" ;

}, 25);

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Și după încărcare facem asta:

clearInterval(pbPos);

document .getElementById("loaderbg" ).style.display = "niciunul" ;

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Rezultatul muncii poate fi văzut.

Această metodă are dezavantaje - Dacă setați ascunderea preîncărcării la onload, de ex. când așteptați până când toate imaginile sunt încărcate, utilizatorul poate crede că pagina este pur și simplu înghețată - de fapt, nu se întâmplă nimic în afară de animație. Dacă îl agățați pe $(document).ready() din jQuery, atunci după ce preloader-ul dispare, imaginile vor fi doar încărcate.

Prin urmare, se recomandă utilizarea...

Metoda numărul 2. Adevărul este acolo, sau Jedi-i replică.
Mai întâi, să desenăm 2 bare de încărcare - active și nu foarte active.

Să-l setăm pe cel inactiv ca fundal, iar pe cel activ să-l punem pe fundalul div-ului, pentru care vom modifica lățimea în funcție de procentul de încărcare.

< div id ="loaderbg" class ="centerbg1" >

< div class ="centerbg2" >

< div id ="preloader" >

< img src ="/design/im/progbar_ph.gif" />

< div id ="progbarfg" >

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Progbar_ph.gif este o imagine de 1 pixel înălțime și lățimea barei noastre de defilare (acest exemplu este greșit fără el în IE și încă nu am găsit o altă modalitate de a centra div-urile barei de progres).
Stilurile sunt aceleași ca în metoda anterioară, cu excepția faptului că

#progbarfg (lățime: 0px; fundal: url(‘/design/im/progbar_fg.png’))

Acum tot ce rămâne este să faci un mic script care să încarce dinamic conținutul și imaginile site-ului. Este necesar pentru ca bara de progres să fie afișată și schimbată chiar înainte ca cadrul utilizat și alte fișiere JS să fie descărcate.

Să luăm un site mediu realizat în întregime pe AJAX. Încărcarea decurge cam așa:

• Se încarcă codul HTML
• pozele incep sa se incarce
• apoi un cadru
• fișiere JS suplimentare (deși este mai bine să îmbinați totul într-unul singur)
• este lansată o anumită funcție (sau mai multe) care atrage conținut suplimentar.

Atribuim o greutate de octeți (sau greutate condiționată) tuturor acestora (minus CSS și HTML), cum ar fi unul, și pe măsură ce fiecare fișier se încarcă (sau se execută funcție) ne mutăm bara de progres.

Am implementat 2 metode - prima este simplă, se pornește astfel:
chiar înainte de a scrie:

< script type ="text/javascript" >
dLoader.start("progbarfg" , 333, "count" );

Primul parametru este identificatorul blocului cu bara de încărcare activă ca fundal, al doilea este lățimea imaginii, al treilea parametru este metoda prin care vom calcula greutatea conținutului.

Scriptul scanează toate imaginile pe pagini și le atribuie o greutate de 1. Toate fișierele JS sunt scrise în corpul său, așa cum vă voi spune mai jos.
Cu toate acestea, aș dori ca greutatea fiecărei piese de conținut să fie nu doar una, ci un volum real în octeți. Și pentru aplicațiile AJAX, aș dori să încarc toate graficele deodată.

Pentru a face acest lucru, am scris un script în PHP care scanează un folder cu imagini de design și pune totul cu dimensiunile fișierelor într-o matrice, opțional comprimându-l.

Așadar, adăugând următoarele în fața noastră, vom obține o bară de progres care va arăta progresul încărcării întregului conținut de pe pagină, după care acesta va dispărea fără probleme.

dLoader.start("mainprogbarfg" , 333, "size" , function ()( $("#preloaderbg" ).fadeOut(250); ));

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Când toate fișierele JS au fost încărcate, funcțiile care se află în matricea invoke sunt lansate. Dacă încărcăm conținut folosind jQuery, funcția va arăta astfel:

funcția fn(callBack)(

$.get("/" , params , function (data)( someHandler(data); eval(callBack); ));

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

Scriptul PHP face următoarele: introduce scripturile necesare cu dimensiunile lor, precum și imagini și funcții suplimentare într-o matrice. Cod:

$date ["js" ] = matrice (

matrice ("cale" => "jquery-1.2.6.min.js" , "dimensiune" => dimensiunea fișierelor ($jsRoot."/jquery-1.2.6.min.js" )),

matrice ("cale" => "functions.js" , "size" => dimensiunea fișierelor($jsRoot."/functions.js" ))

$date ["im" ] = GetFiles($imgRoot, true );

$date ["invoke" ] = matrice (

"action" => "loadTemplates" ,

"size" => GetDirSize(dirname(__FILE__)."/design/ajax templates/" , false )

$data ["jspath" ] = "/design/js/" ;

$data ["impath" ] = "/design/im" ;

* Acest cod sursă a fost evidențiat cu Sursa de evidențiere a codului.

După ce toate imaginile și fișierele JS au fost încărcate, este apelat evenimentul onLoad, pe care l-ați specificat în funcția dLoader.start()

Există, de asemenea, o modalitate de a personaliza procesul de încărcare.

În această lecție ne vom uita la cum să facem procentul de încărcare a preîncărcării cu elemente de pe pagină. Aici vom lucra cu jQuery, ne vom familiariza cu metodele sale, vom afla cum funcționează ciclurile și vom crea propria noastră funcție care va efectua anumite acțiuni.

Etapele creării unui preîncărcare

Să obținem numărul total de poze de pe pagină, să aflăm procentul, cât este alocat fiecărei imagini, să umplem în buclă bara de progres până când toate imaginile apar pe pagină și, în final, cu încărcare 100%, să arătăm întregul pagina și ascundeți preîncărcarea.

Acesta va fi conceptul general al acestui script.

Să transferăm toate fișierele în mediul nostru de dezvoltare, să lansăm Index, să deschidem consola browserului și să vedem cum sunt încărcate imaginile, atât cu cât și fără cache activată.

Când memorarea în cache este dezactivată, primim imagini, dar bara de progres funcționează în continuare. Dacă facem throttling pe 3G, atunci totul se schimbă aici, pozele nu s-au încărcat încă toate, dar bara de progres este plină 100% și așteaptă până se încarcă pagina.

Motivul pentru aceasta este timpul de încărcare a preîncărctorului și procentul pe care îl setăm manual; trebuie să lucrăm cu acești parametri.

Deoarece vom schimba logica scriptului, nu este nevoie să-l apelăm în partea de jos, deoarece bara de progres ar trebui acum să fie încărcată mai întâi, mutăm toată conexiunea fișierelor în cap.

Inițializarea variabilelor

Ne întoarcem la script și inițializam mai multe variabile în partea de sus.

Mutăm variabila preloader = $("#preloader") chiar sus, cu ajutorul căreia ascundem acest identificator. Îl vom folosi puțin mai târziu.

Preloader = $("#preloader"), // selector de preîncărcare

Restul codului poate fi comentat sau șters; nu vom mai avea nevoie de el.

// $(window).on(„încărcare”, funcția () ( // $preloader.delay(1800).fadeOut(„lent”); // ));

Folosim biblioteca jQuery pentru a accesa obiecte imagine. Să folosim funcția de lungime pentru a afla numărul de imagini de pe pagină și să plasăm rezultatul rezultat în variabila imagesCount.

ImagesCount = $("img").length, // numărul de imagini

Mai jos vom verifica și afișa acest rezultat în consolă.

Console.log(imagesCount);

Și așa, acum știm câte imagini grafice sunt prezente pe pagină. Apoi, puteți calcula numărul de procente alocate unei imagini.

Împărțim 100 la numărul de imagini și punem rezultatul rezultat într-o variabilă. Pentru a verifica, îl vom afișa imediat în consolă.

Procent = 100 / imaginiNumăr; //cantitate % per imagine console.log(procent);

Acum știm parametrul procentului de încărcare, cât de mult progres trebuie să umplem când rulăm scriptul și cât procent este alocat fiecărei imagini.

La apelarea funcției din parametri, locul 100, înregistrăm o variabilă cu numărul de procente pe imagine și modificăm viteza de încărcare la 1000 astfel încât bara de progres să încarce procentele inițiale mai repede.

)).circularProgress("animate", procente, 1000);

Clonarea imaginilor într-o buclă

Acum următoarea sarcină este să creăm o copie a fiecărei imagini, unde cu fiecare clonă numim funcția de lansare a barei de progres, iar în timpul apelului, lansăm bara de progres, în care încărcăm procentul alocat acesteia pe fiecare imagine. , umplând astfel complet progresul până la punctul final.

Pentru a face acest lucru, creăm o buclă, unde I este o variabilă contor, apoi scriem o condiție, în timp ce I este mai mic decât numărul de imagini, vom crește contorul cu o var i = 0; i< imagesCount; i++ , и в скобках выполнять следующие действия.

Creăm o variabilă în care plasăm o instanță a obiectului Image (adică o imagine), apoi facem o copie a src .

Browserul vă permite să urmăriți încărcarea resurselor externe - scripturi, imagini folosind un eveniment - dacă apare o eroare în timpul încărcării.

Următoarea linie apelează funcția folosind evenimentul onload, în care se lansează bara de progres; o vom descrie puțin mai târziu.

Și în a doua linie numim evenimentul onerror, dacă brusc a apărut o eroare: imaginea nu s-a încărcat.

Pentru (var i = 0; i< imagesCount; i++){ // создаем клон изображений var img_copy = new Image(); img_copy.src = document.images[i].src; img_copy.onload = img_load; img_copy.onerror = img_load; }

Mai jos descriem o funcție care lansează preîncărcarea și adaugă un procent, scrieți funcția img_load() în interior pentru a adăuga procentul pe care îl cunoaștem la progresul de încărcare. Pentru a face acest lucru, creați o altă variabilă cu o valoare zero, numiți-o progres.

Progres = 0; // punct de start

Și apoi creăm o altă variabilă numită loadedImg cu o valoare zero. Va fi, de asemenea, un contor prin care vom compara cu numărul de imagini clonate.

LoadedImg = 0, // contor de încărcare a imaginii

Ne întoarcem la funcție, facem adăugările progrese += procente în nutrie și salvăm rezultatul în curs. În a doua linie, creștem contorul loadedImg++ cu unul.

Apoi, scriem o condiție, dacă progresul este mai mare sau egal cu 100 (unde 100 este numărul total de procente) sau contorul loadedImg este egal cu numărul de imagini încărcate imagesCount , atunci puteți șterge bara de progres preloader.delay (400).fadeOut(„lent”); , altfel apelăm bara de progres, unde creștem progresul și reducem viteza de încărcare la 500.

Funcția img_load() (progres += procent; loadedImg++; if (progres >= 100 || loadedImg == imagesCount)( preloader.delay(400).fadeOut(„lent”); qBody.css(„overflow”, „” ); ) $(".dws-progress-bar").circularProgress("animate", progres, 500); )

Folosind consola, să verificăm cum sunt create noi obiecte imagine.

Console.log(img_copy); console.log(img_copy.src);

Vedem că cinci clone de imagine au fost create cu succes, fiecare are un link, nu există erori, funcția este procesată cu succes.

Îndepărtarea unui preîncărcare

Acum să eliminăm scroll-ul din dreapta în jos, astfel încât la încărcarea preîncărcării să nu putem derula pagina, așa cum facem acum.

Pentru a face acest lucru, vom împacheta totul într-o condiție: dacă numărul de imagini este mai mare decât zero imagesCount > 0, atunci vom executa acest script, altfel vom șterge preloader-ul preloader.remove(); . Dacă condiția este trecută, adăugați un fundal negru la preloader.css("background", "#000"); , iar în css vom elimina acest stil.

Dacă (imagesCount >= imgSum && imagesCount > 0) ( preloader.css("background", "#000"); ) else ( preloader.remove(); )

Initializam o alta variabila in care plasam selectorul qBody = $("body") , iar in conditia specificam un scroll lock pentru selectorul body qBody.css("overflow", "hidden"); .

QBody.css(„overflow”, „ascuns”);

Acum trebuie să deblocăm derularea, pentru aceasta, când ștergem preloader-ul, apoi pentru body ștergem blocarea qBody.css("overflow", ""); .

QBody.css("overflow", "");

Îndepărtăm informațiile de ieșire din consolă și salvăm.

Adăugarea de funcționalități la preîncărcare

În principiu, preloader-ul este gata, dar nu va fi întotdeauna interesant pentru noi să-l lansăm cu una sau două imagini pe pagină. Pentru a nu-l mai apela, să adăugăm o variabilă, să o numim imgSum și să punem în ea valoarea imgSum = 3; .

Să adăugăm la condiția că dacă numărul de imagini este mai mare sau egal cu variabila noastră (imagesCount >= imgSum && imagesCount > 0), atunci îndeplinim condiția, altfel ștergem preloader-ul. Astfel, folosind această variabilă imgSum, putem seta încărcarea preloader-ului pentru un anumit număr de imagini.

Când bara de progres funcționează rapid, procentul nostru trece dincolo de 100, haideți să remediam acest lucru imediat. Deschideți fișierul plugin.js, găsiți în el unde se formează procentul și adăugați mai întâi următoarea condiție, verificați valoarea procentului, dacă este mai mare de 100, apoi returnați 100, în caz contrar lăsați-o neschimbată.

global_settings.percent = (global_settings.percent > 100) ? 100: global_settings.percent;

Să mai adăugăm câteva imagini, să vedem cum se va comporta preîncărcarea cu un număr mare de ele și, în același timp, să verificăm setările suplimentare.

Pe această notă, închei lecția, dacă ați fost interesat, asigurați-vă că o împărtășiți prietenilor tăi.

Lecția a fost pregătită de Denis Gorelov.