{"id":209,"date":"2022-02-22T09:31:53","date_gmt":"2022-02-22T09:31:53","guid":{"rendered":"https:\/\/adsinteractive.hu\/blog\/?p=209"},"modified":"2022-05-27T11:19:53","modified_gmt":"2022-05-27T11:19:53","slug":"a-2-tema-amirol-erdemes-tudni-lazy-loading","status":"publish","type":"post","link":"https:\/\/adsinteractive.hu\/hu\/blog\/a-2-tema-amirol-erdemes-tudni-lazy-loading\/","title":{"rendered":"A 2. t\u00e9ma amir\u0151l \u00e9rdemes tudni: Lazy Loading"},"content":{"rendered":"\n

El\u0151z\u0151 bejegyz\u00e9s\u00fcnkben a 4 t\u00e9ma amir\u0151l besz\u00e9ln\u00fcnk kell<\/a>\u2026 eml\u00edtett\u00fck, hogy vannak olyan t\u00e9m\u00e1k a digit\u00e1lis vil\u00e1gban, – amit minden mag\u00e1ra valamit is ad\u00f3 publisher aki t\u00f6r\u0151dik weboldal\u00e1val \u00e9s szeretn\u00e9 a legt\u00f6bbet kihozni bel\u0151le, a legjobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt ny\u00fajtani olvas\u00f3inak \u2013 k\u00f6vetnie \u00e9s ismernie kell.

Sorozatunk mai r\u00e9sz\u00e9ben a Lazy Load<\/strong> technol\u00f3gi\u00e1t vessz\u00fck g\u00f3rcs\u0151 al\u00e1 \u00e9s \u00e1rulunk el minden r\u00e9szletet amit tudni \u00e9rdemes r\u00f3la.<\/p>\n\n\n\n

Lazy Loading<\/h2>\n\n\n\n


\u00c1ltal\u00e1ban amikor a felhaszn\u00e1l\u00f3 megnyit egy weboldalt, a teljes oldal tartalma egy l\u00e9p\u00e9sben let\u00f6lt\u0151dik \u00e9s megjelen\u00edt\u0151dik.
A lazy loading furcs\u00e1n hangzik, de ez egy egyszer\u0171 koncepci\u00f3: csak akkor t\u00f6lt be egy szkriptet vagy k\u00e9pet, amikor sz\u00fcks\u00e9g van r\u00e1.
Ennek ellent\u00e9te az eager bet\u00f6lt\u00e9s, ami azt jelenti, hogy mindent egyszerre t\u00f6lt be (pl. amikor a teljes oldalt el\u0151sz\u00f6r t\u00f6lti be).<\/p>\n\n\n\n

\"\"
Haszn\u00e1ljuk a Lazy Loading-ot<\/figcaption><\/figure><\/div>\n\n\n\n


Az eager bet\u00f6lt\u00e9snek persze megvan az az el\u0151nye, hogy minden azonnal el\u00e9rhet\u0151, amikor sz\u00fcks\u00e9g van r\u00e1, ami nagyszer\u0171, de van egy nagy h\u00e1tr\u00e1nya, hogy rengeteg adatot kell lek\u00e9rni id\u0151 el\u0151tt \u2013 m\u00e9g olyan adatokat is, amelyekre esetleg soha nem lesz sz\u00fcks\u00e9g (pl. az oldal olyan r\u00e9sz\u00e9n jelennek meg, amelyet a felhaszn\u00e1l\u00f3 soha nem l\u00e1togat meg).

A lazy loading bet\u00f6lt\u00e9s felgyors\u00edthatja az oldal kezdeti bet\u00f6lt\u00e9si idej\u00e9t<\/strong>, mivel elker\u00fclheti a felesleges er\u0151forr\u00e1sok id\u0151 el\u0151tti let\u00f6lt\u00e9s\u00e9t. Ezenk\u00edv\u00fcl megtakar\u00edthatja a felhaszn\u00e1l\u00f3k s\u00e1vsz\u00e9less\u00e9g\u00e9t.<\/p>\n\n\n\n

Egy p\u00e9lda a Lazy Loading alkalmaz\u00e1sra<\/h2>\n\n\n\n


A WordPress, az egyik legn\u00e9pszer\u0171bb blogol\u00e1si platform a weben, \u00e9s az Infinite Scroll nev\u0171 Lazy Loading megold\u00e1st k\u00edn\u00e1lja.

Ahogy a neve is sugallja, az Infinite Scroll folyamatosan bet\u00f6lti a tartalmat, mik\u00f6zben a felhaszn\u00e1l\u00f3 lefel\u00e9 g\u00f6rget az oldalon. Az oldal l\u00e1bl\u00e9ce \u2013 amely \u00e1ltal\u00e1ban nem \u00e9rhet\u0151 el a v\u00e9gtelen\u00fcl bet\u00f6lt\u0151d\u0151 weboldalon \u2013 fedv\u00e9nyk\u00e9nt jelenik meg a g\u00f6rget\u0151 tartalom alatt. A WordPress azt \u00e1ll\u00edtja, hogy a felhaszn\u00e1l\u00f3k t\u00f6bb bejegyz\u00e9st olvasnak el, ha az Infinite Scroll enged\u00e9lyezve van, szemben a hagyom\u00e1nyos oldalalap\u00fa megk\u00f6zel\u00edt\u00e9ssel.

A Google m\u00e1s megk\u00f6zel\u00edt\u00e9st alkalmaz a k\u00e9pkeres\u00e9si eredm\u00e9nyeihez. Ahogy a felhaszn\u00e1l\u00f3 lefel\u00e9 g\u00f6rget az oldalon, a placeholder k\u00e9peket miniat\u0171r\u00f6k v\u00e1ltj\u00e1k fel. Bizonyos sz\u00e1m\u00fa k\u00e9p megjelen\u00edt\u00e9se ut\u00e1n egy gomb seg\u00edts\u00e9g\u00e9vel a felhaszn\u00e1l\u00f3 tov\u00e1bbi k\u00e9peket t\u00f6lthet be. Ennek a gombnak a biztos\u00edt\u00e1s\u00e1val a Google az infinity Scroll-t \u00e9s a Lazy Loading-ot kombin\u00e1lja, ez\u00e1ltal egy dinamikus hibrid megk\u00f6zel\u00edt\u00e9st hoz l\u00e9tre.<\/p>\n\n\n\n

\"\"
Felhaszn\u00e1l\u00f3 bar\u00e1t megold\u00e1s<\/figcaption><\/figure><\/div>\n\n\n\n

El\u0151nyei<\/h2>\n\n\n\n