Html líné načítání obsahu nekonečné posouvání css. Nekonečné posouvání stránek: Funkce a nápady. Nevýhody Infinite Scroll

je odmítnutí načíst veškerý obsah na stránku, když to není nutné. Tím se použije značka označující, že data nebyla načtena, ale v případě potřeby je bude nutné načíst.

Pomocí líného načítání se obrázky a další materiály na webu načítají asynchronně, konkrétně po úplném načtení viditelné části webové stránky nebo výhradně při zobrazení viditelné části okna prohlížeče. Pokud například návštěvník nepřejde na konec stránky, nenačtou se obrázky umístěné dole.

Líné načítání je relevantní u mnoha zdrojů, zejména u těch s velkým množstvím obrázků. Navštivte jakoukoli online službu s fotografiemi ve vysokém rozlišení a všimněte si, že web načítá pouze fotografie, které jsou viditelné na vaší obrazovce, a když se posunete dolů, nové fotografie se začnou načítat, jakmile se objeví na obrazovce. Při posouvání se zástupné symboly nahrazují obrázky s vysokým rozlišením.

Často existují případy, kdy určitý fragment stránky není viditelný pro každého, ale na jeho zpracování nebo přenos materiálu je vynaloženo obrovské množství zdrojů. Právě tehdy je čas myslet na líné načítání, které odstraní generování a načítání skryté prvky dokud je nebude nutné prohlížet nebo používat.

Jen poznámka.

Líné načítání je povoleno a je generováno událostmi monitorovanými pomocí . Před použitím asynchronního načítání je tedy důležité počítat s tím, že funkce nebude dostupná uživatelům, kteří nemají JS, a roboti vyhledávačů neuvidí obsah skrytý skriptem. Nyní si povíme o dvou dobré důvody

, u kterého byste se měli rozhodnout ve prospěch líného načítání: Pokud váš webový zdroj zobrazuje články nebo poskytuje návštěvníkům různé funkce pomocí JavaScriptu, musíte načíst . Zpravidla je třeba skripty načíst před spuštěním objektový model dokument. Proto na webu obsahujícím množství fotografií a dalších obrázků hraje líné načítání

Principem asynchronního načítání je načíst obsah pouze v případě, že návštěvník posouval webovou stránku dolů na fragment, do kterého se dostal viditelná část okno prohlížeče. Jednoduše řečeno, fotografie se nenačtou, pokud se uživatel neposune do tohoto bodu na stránce. A to má pozitivní vliv na úsporu provozu, potažmo na mnoho uživatelů využívajících gadgety i na ty, kteří je mají slabý internet , ocení tuto funkci

zdroj v jeho skutečné hodnotě. Příště to určitě budou chtít navštívit znovu. Na základě výše uvedeného můžeme dojít k závěru líné načítání

výrazně zlepšuje výkon webu.

Typy líného načítání Posouvání. Obsah, který není ve viditelné oblasti, se načte až poté, co si návštěvník přečte již načtený původní obsah a posune stránku dolů. Tuto možnost najdete pro asynchronní načítání v

sociální sítě , kde zpravodajství nikdy nekončí, stejně jako v některých online mediálních zdrojích, internetových obchodech a katalozích zboží a služeb. Při použití „nekonečného“ rolování je důležité zajistit správnou navigaci do hlavní nabídky instalací pevného panelu nebo „horního“ tlačítka. Plakat. Obsah se načte poté, co uživatel klikne na speciální odkaz, jako je „další podrobnosti“. Další příklady stahování kliknutím: vzhled

modální okna a otevření obrázku v plné velikosti po kliknutí na miniaturu. Tento způsob zobrazování informací je nejběžnější, ale málokdy je pro uživatele zajímavý. Pokud je materiál stále pro návštěvníka zajímavý nebo je pro vyhledávače velmi důležitý a stačí jej schovat pro úsporu místa, pak je lepší funkci implementovat přes standardní JS než AJAX. Takto se obsah načte a zobrazí až po kliknutí. Režim na pozadí. Řekněme, že návštěvník již stáhl dokument a nechal jej otevřený. V tomto případě v pozadí

můžete nahrát například fotografii

velkém měřítku

5 možností líného načítání obrázků

Promluvme si o nejčastějších a hotová řešení líné načítání obrázků.

Ve zjednodušené verzi tento skript pro líné načítání nahrazuje atribut src atributem data-src ve značce img:

Prvky img obsahující atributy data-src jsou skryty v . Po načtení se obrázky zobrazí plynule pomocí přechodů:

Img (neprůhlednost: 1; přechod: neprůhlednost 0,3 s; ) img (neprůhlednost: 0; )

JavaScript pak předá všem img tagy src, které nakonec obdrží hodnotu atributu data-src. Po načtení všech obrázků se data-src odstraní z img:

ForEach.call(document.querySelectorAll("img"), function(img) ( img.setAttribute("src", img.getAttribute("data-src")); img.onload = function() ( img.removeAttribute( "data-src");

David Walsh také poskytl záložní řešení v případě selhání JavaScriptu, což je efektivní a snadno implementovatelné. Jeho funkčnost však neumožňuje načítání při rolování webové stránky. To znamená, že prohlížeč načte všechny obrázky bez ohledu na to, zda na ně návštěvník „dosáhl“ či nikoli. Ano, záložní stránka umožňuje rychlejší zobrazení stránky, protože obrázky se načítají až po HTML, ale nedojde k žádné úspoře provozu.

Technika zahrnuje líné načítání, ve kterém se používá JS jako vylepšení standardní CSS a HTML. Progresivní vylepšování zajišťuje, že se obrázky uživatelům zobrazují, i když je zakázán JavaScript, který je zodpovědný za jejich zobrazování, nebo se objeví chyba, která blokuje fungování skriptu.

Progresivní vylepšení má několik výhod:

Technika je relevantní jak v případě postiženého, ​​tak zlomeného JS. To je důležité, protože skripty jsou často vystaveny chybám.

Poskytuje uživatelům snadný přístup ke zdrojovým materiálům.

Pro implementaci metody není potřeba používat pluginy a frameworky.

Líné načítání funguje rolováním – fotografie se nenačtou, dokud návštěvník neodroluje stránku na příslušné místo.

Můžete se dozvědět podrobné informace o řešení Osborne.

č. 3. Plugin bLazy.js pomocí jednoduchého JS

Tento skript je lehký, provádí asynchronní načítání a pracuje s více obrázky, aby šetřil provoz a požadavky serveru. Jeho použití poskytuje:

Líné načítání pozadí a přidaných obrázků.

Podpora zastaralé prohlížeče, včetně verzí IE 7 a 8.

Načítání obrázků do rolovatelného kontejneru.

Použití CDN k hostování pluginu mimo server.

Načítání všech prvků obsahujících atribut src: skripty, prvky iframe atd.

Asynchronní načítání fotografií na základě rozlišení a velikosti obrazovky.

Standardní provedení. Označení:

Značka img musí být změněna:

Přidejte class.b-lazy.

Použijte zástupný symbol jako hodnotu src. Transparentní vložené gify se základním kódem pomohou ušetřit počet požadavků na server. Mějte však na paměti, že jiné stránky, které používají stejné obrázky, nebudou uloženy do mezipaměti.

Data-src ukazuje na obrázek, který je třeba načíst asynchronně.

JavaScript: zadejte standardní volání bLazy a nakonfigurujte objekt pomocí mapy možností:

Var bLazy = new Blazy(( //options ));

č. 4. Plugin Lazy Load XT jQuery

Vynikající plugin pro pohodlné psaní vlastního skriptu pro líné načítání. Upozorňujeme, že existuje plná verze plugin jQuery, kde prostřednictvím asynchronního načítání můžete načítat videa, iframe a další značky obsahující atribut src a existuje zjednodušený, určený výhradně pro jednoduché líné načítání.

Chcete-li plugin používat na webu, musíte před uzavírací značku přidat knihovnu jQuery, která specifikuje jquery.lazyloadxt.js (zjednodušená verze) nebo jquery.lazyloadxt.extra.js (rozšířená):

Existuje také alternativní možnost, která vám umožní nepoužívat celý plugin - lehký skript jqlight.lazyloadxt.min.js:

V obrázcích nahraďte src atributem data-src:

Plugin lze aktivovat automaticky, nebo to můžete udělat sami. Chcete-li to provést, jednoduše zadejte:

$(elements).lazyLoadXT();

Lazy Load XT jQuetry přidává velký počet doplňky. Například:

Přidáním jquery.lazyloadxt.spinner.css je možné zobrazit animovaný spinner během procesu načítání obrázku.

Připojením animate.min.css pro web a zadáním $.lazyLoadXT.onload.addClass = ‘animated bounceOutLeft’ v souboru JS; lze přidat z Animate.css různé efekty

nahrát obrázky.

Výhody techniky:

Pracuje s velkým počtem prohlížečů.

Podporuje CDN, takže skripty není nutné nahrávat na server.

Poskytuje možnost asynchronního načítání mnoha typů médií. Doplňky umožňují vytvářet krásné přechody, líně načítat obrázky na pozadí

a tak dále.

Možností, jak využít líné načítání, je nepřeberné množství – na stránce, v rozložení s vodorovným nebo svislým rolováním, v kontejneru atd.

Pokud nechcete používat celý plugin, můžete připojit odlehčený skript.

Všechny doplňky a možnosti si můžete prohlédnout pomocí tohoto odkazu.

č. 5. Rozmazaný obrázek od Craiga Bucklera

Určitě jste si na některých stránkách všimli, jak je hlavní obrázek článku nejprve rozmazaný a poté se načte čistý obrázek vysoká kvalita. Existuje několik možností pro nahrávání fotografií pomocí metody efektu rozostření. Jedním z nejlepších je Craig Buckler.

Výhody techniky jsou:

Vysoký výkon: něco málo přes 1 bajt kódu JS a 463 bajtů CSS.

Nezávislost na frameworkech a knihovnách.

Podpora obrazovky sítnice.

Použití progresivního vylepšení na nefunkční JavaScript a zastaralé prohlížeče.

Kód si můžete stáhnout z úložiště webu GitHub.

Nejprve musíte zahrnout knihovnu jQuery:

Podstatou metody je načítání pomocí AJAXu nezbytný prvek div z levého souboru na vstupní stránku.

Portfolio Zobrazit více...

Vše je celkem jednoduché a jasné. Ale musíte věnovat pozornost div s id=”smartPortfolio”, protože jsou v nejdůležitějším skriptu zodpovědné za načítání obsahu z dokumentů třetích stran. „Kontejnerem“ portfolia je SmartPortfolio. MoreButton – tlačítko, které po kliknutí načte další fragment portfolia. LoadingDiv – část stránky, kde se zobrazí text, pokud úplné otevření portfolia nebo dojde k jakékoli chybě.

Například mnoho z těch, kteří si článek přečtou, pak skript otestuje přes indexový soubor v prohlížeči, spíše než nahrání na server. Zobrazí se upozornění na chybu. A pokud je také slabé připojení k internetu, bude stahování souborů trvat déle. Proto je důležité napsat zprávu nebo vložit obrázek, aby uživatel věděl, že stahování probíhá.

Zde je samotný skript, pro jeho připojení je potřeba vložit kód před závěrečný značka těla :

Var lazyload = lazyload || (); (function($, lazyload) ( "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + stránka + ".html"; $(buttonId).hide(); $(loadingId).show(( url: url, success: function(response) ( if (); !response ||.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("Portfolio plně načteno"); return; ) appendContests(response); odpověď) ( $(loadingId).text("Omlouváme se, došlo k chybě. Prosím obnovte stránku."); ) )); $(buttonId).show(); ).appendTo($(kontejner));

Ve struktuře webového zdroje jsou stránky, ze kterých budou po kliknutí načtena data, umístěny ve složce pages. Obsahuje 3 soubory, poslední je prázdný. To zajišťuje logika skriptu. Cesta v něm vypadá takto:

Var url = "./pages/" + stránka + ".html";

Ale při použití jiné cesty je důležité ji nahradit v samotném skriptu. Totéž je třeba udělat, pokud jste použili jiná ID:

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

Poté, jak již bylo zmíněno dříve, před značkou body (uzavírací) označíme skript:

Závěr

Líné načítání umožňuje zrychlit výkon webu a výrazně ušetřit provoz díky skutečnosti, že objekty umístěné mimo rozsah viditelnosti okna prohlížeče se načítají až poté, co to uživatel potřebuje. Vzhledem k rozmanitosti typů asynchronního načítání a možností jeho implementace je použitelný pro různé typy webové stránky a jejich cílenou návštěvnost.

"Co bych měl použít pro obsah - stránkování nebo posouvání?" Někteří designéři se stále potýkají s výběrem té či oné metody pro své projekty. Každé řešení má své silné a slabé stránky a na všechny se podíváme v tomto článku. Bude pro vás snazší dělat správná rozhodnutí pro různé projekty.

Nekonečné posouvání je technika, která uživatelům umožňuje procházet masivním proudem obsahu bez viditelného posouvání cílová čára. Tato technika obnovuje stránku při posouvání obsahu dolů. Jakkoli to může znít lákavě, zjevně se nejedná o univerzální řešení pro každý web nebo aplikaci.

Výhoda č. 1: Zapojení uživatelů a nasazení obsahu

Když použijete rolování jako hlavní metoda navigaci v datech se uživatel na webové stránce zdrží déle a tím se zvyšuje jeho angažovanost. Kvůli oblíbenosti sociální média,Uživatelé se často potýkají s masivními proudy obsahu; Nekonečné posouvání nabízí efektivní způsob, jak procházet tento oceán informací, aniž byste museli čekat na načtení stránek.

Nekonečné posouvání je téměř nutností pro vyhledávací rozhraní. Když uživatel nehledá něco speciálního, ale potřebuje jen prozkoumat velké množství prvků, aby našel to, co se mu líbí.

Moře špendlíků na Pinterestu

Na příkladu feedu můžete ocenit výhody nekonečného rolování Facebook novinky. Na základě tichého souhlasu uživatelé vědí, že ve zdroji neuvidí vše, protože obsah je příliš často aktualizován. S nekonečným posouváním se Facebook snaží uživatelům při prohlížení tohoto proudu dat ukázat co nejvíce informací.

Informační kanál Facebooku: uživatel stále více roluje, aby aktualizoval obsah Výhoda č. 2: Posouvání je lepší než klikání

Uživatelé považují za pohodlnější rolování než klikání. Pomocí kolečka myši popř dotykový displej rolování je rychlejší a jednodušší než klikání. U dlouhé části souvislého obsahu, jako je lekce, je posouvání mnohem pohodlnější než rozřezávání textu na několik samostatných obrazovek nebo stránek.

Pokud používáte kliknutí, pak každá část aktualizace obsahu vyžaduje další kliknutí a také čas na načtení stránky. Pro posouvání: obsah je průběžně aktualizován, je potřeba pouze jedna akce. Zdroj: designbolts Výhoda č. 3: Posouvání je dobré mobilní zařízení

Čím menší je obrazovka, tím delší je rolování. Popularizace mobilního prohlížení také upřednostňuje rolování. Ovládání gesty na mobilních zařízeních velmi usnadňuje posouvání. Výsledkem je, že uživatelé získají skutečně citlivý zážitek bez ohledu na zařízení, které používají.

Nevýhoda č. 1: Výkon stránky a zdroje zařízení

Rychlost načítání stránky do značné míry určuje uživatelský dojem. Mnoho studií ukázalo, že pomalé načítání vedou k tomu, že lidé jednoduše opustí web nebo smažou aplikaci, což vede k nízký koeficient konverze. A tohle špatné zprávy pro ty, kteří používají nekonečné rolování. Jak více uživatelů roluje po stránce dolů, tím více obsahu se načte na jednu stránku. V důsledku toho se výkon stránky výrazně zpomalí.

Dalším problémem jsou omezené zdroje zařízení. Na mnoha webech s nekonečným posouváním, zejména na těch s velkým množstvím obrázků, zařízení s omezené zdroje, jako je iPad, se může začít zpomalovat kvůli obrovskému množství stažených zdrojů.

Nevýhoda č. 2: Nalezení a lokalizace dat

Další problém s nekonečným posouváním nastává, když uživatelé dosáhnou určitého bodu ve vlákně, nemohou si označit svou polohu a vrátit se později. Pokud web opustí, ztratí svůj postup a budou muset znovu posunout dolů, aby se dostali do stejného bodu. Nemožnost určit polohu uživatele při rolování způsobuje nejen nepříjemnosti pro uživatele, ale také kazí celý zážitek z interakce s produktem.

V roce 2012 Etsy strávila spoustu času implementací rolovacího rozhraní a zjistila, že nové rozhraní nefungovalo tak dobře jako stará verze se stránkováním. A přestože počet prodejů zůstal téměř beze změn, zapojení uživatelů se snížilo – lidé nevyužívali vyhledávání tak aktivně jako dříve.

Nekonečné rolovací vyhledávací rozhraní na Etsy. Aktuální verze je založena na stránkování.

Jak poznamenává Dmitrij Fadeev: „Lidé se budou chtít vrátit na seznam výsledků vyhledávání, aby zkontrolovali pozice, které právě viděli, a porovnali je s jinými produkty někde na konci seznamu. Nekonečné posouvání nejen narušuje tuto dynamiku, ale ztěžuje pohyb v seznamu nahoru a dolů, zvláště když se potřebujete vrátit na stránku jindy a jste vrženi zpět úplně nahoru, musíte znovu posouvat dolů a čekat. aby se obsah načetl. Proto je rozhraní pro nekonečné posouvání ve skutečnosti pomalejší než stránkované rozhraní.“

Chyba č. 3: Irelevantní posuvník

Posuvníky neodrážejí skutečné množství dostupných dat. S radostí se budete posouvat dolů v domnění, že jste blízko konce, což vás samo o sobě nutí posouvat se o něco více, abyste viděli, že se výsledky jednoduše zdvojnásobily. Z hlediska přístupnosti a srozumitelnosti rozhraní to není příliš dobré.

Posuvník by měl odrážet skutečnou délku stránky Nevýhoda č. 4: Chybějící zápatí.

Zápatí existují z nějakého důvodu: obsahují obsah, který uživatelé potřebují – pokud uživatelé nemohou něco najít nebo potřebují další informace, často tam chodí. Ale protože se datový kanál nekonečně posouvá, když uživatel přijde na konec, načte se další kus dat a do zápatí se prostě nedostane.

Když bylo v roce 2012 na LinkedIn představeno nekonečné posouvání, uživatelé mohli posouvat obrazovku ještě před načtením obsahu.

Weby s nekonečným posouváním by měly mít možnost dosáhnout na zápatí, aby bylo lepkavé, nebo přesouvat odkazy do záhlaví nebo postranní panel.

Facebook přesunul všechny odkazy ze zápatí (např. 'Právní', 'Kariéra') do pravého panelu.

Případně můžete vytvořit tlačítko Načíst více pro načtení obsahu na vyžádání. Nový obsah nenačte se automaticky, dokud uživatel neklikne na tlačítko. Uživatelé se tak bez problémů dostanou do suterénu.

Instagram poskytuje tlačítko „Načíst více“, které zajistí, že zápatí bude uživatelům vždy k dispozici.

Stránkování rozděluje obsah na jednotlivé stránky. Pokud posouváte stránku dolů a uvidíte řadu čísel, tato řada čísel představuje stránkování webu nebo aplikace.

Výhoda č. 1: Dobrá konverze

Stránkování funguje dobře, když uživatel hledá něco v seznamu výsledků, místo aby jen procházel proudem dat.

Výhody stránkování můžete ocenit například pomocí Vyhledávání Google. Vyhledávání nejlepší výsledky Hledání bude trvat sekundu nebo hodinu, v závislosti na předmětu výzkumu. Když se ale rozhodnete ukončit vyhledávání na Googlu v aktuálním formátu, znáte přesný počet výsledků vyhledávání. Můžete se rozhodnout, kdy přestat a na kolik výsledků se podíváte.

Údaje o výsledcích vyhledávání Google Výhoda č. 2: Pocit kontroly

Nekonečné rolování je jako nekonečná hra – bez ohledu na to, jak daleko jdete, máte pocit, že nikdy nedojdete na konec. Když uživatelé znají počet dostupných výsledků, mohou činit informovanější rozhodnutí, místo aby se prohrabávali nekonečně aktualizovaným seznamem. David Kieras ve své studii „The Psychology of Human-Computer Interaction“ poznamenává: „Dosažení koncového bodu poskytuje pocit kontroly.“ Studie také vysvětluje, že když má uživatel omezené, ale relevantní výsledky, může snadněji určit, zda to, co hledá, tam je nebo ne.

Když navíc uživatelé uvidí celkový počet výsledků (samozřejmě, když to není nekonečné), snáze odhadnou, jak dlouho bude trvat nalezení požadovaného materiálu.

Výhoda č. 3: Pozice prvku

Rozhraní založené na stránce umožňuje neustále si pamatovat umístění prvku. Uživatelé si nebudou nutně pamatovat přesné číslo stránky, ale budou si to zhruba pamatovat a očíslované odkazy jim pomohou rychleji se tam dostat.

Pomocí stránkování uživatelé ovládají navigaci, protože vědí, kterou stránku vybrat, aby se dostali tam, kde byli.

Stránkování je dobré pro komerční weby a aplikace. Když uživatelé nakupují online, chtějí mít možnost vrátit se tam, kde přestali, a pokračovat v nákupu.

Web MR Porter používá stránkování pro produkty Nevýhody: Další kroky

Chcete-li přejít na novou stránku pomocí stránkování, musí uživatel najít cílový odkaz (například „Další“), najet na něj myší, kliknout a počkat, až se nová stránka načte.

Chcete-li získat obsah, musíte kliknout

Hlavním problémem je, že většina webových stránek zobrazuje uživatelům velmi omezené množství obsahu na jedné stránce. Prodloužíte-li stránky, aniž byste ohrozili rychlost načítání, uživatelům poskytnete více obsah na stránce a snížit počet potřebných kliknutí.

Kdy byste měli používat nekonečné posouvání/stránkování?

Existuje jen několik případů, kdy je efektivní nekonečné posouvání. Nejlépe se hodí pro stránky a aplikace s obsahem vytvářeným uživateli (Twitter, Facebook) popř vizuální obsah(Pinterest, Instagram). Na druhé straně stránkování je robustní a dobře se hodí pro weby a aplikace, které zajišťují cílené akce uživatelů.

Práce vyhledávače Google - skvělý příklad takové stránky. Obrázky Google používají nekonečné posouvání, protože uživatelé mohou zpracovávat obrázky mnohem rychleji než text. Čtení výsledků vyhledávání trvá mnohem déle. To je důvod, proč se výsledky Vyhledávání Google stále zobrazují tradičnějším způsobem.

Závěr

Návrháři musí zvážit klady a zápory nekonečného posouvání a stránkování, než se rozhodnou. Výběr závisí na designu obsahu a na tom, jak je obsah doručován. Obecně platí, že nekonečné posouvání funguje skvěle u projektů, jako je Twitter, kde uživatelé konzumují nekonečný proud dat, aniž by hledali něco konkrétního, a stránkování funguje lépe pro stránky s výsledky vyhledávání, kde lidé hledají něco konkrétního a kde je pozice datových prvků je důležité.

Začneme s běžná stránka galerii, která obsahuje kontejner pro naše obrázky, a pomocí volání budeme sledovat pozici posouvání Funkce JavaScriptu s krátkým intervalem. Pokaždé, když je posuvník ve spodní části stránky, uděláme to AJAX požadavek co externí PHP soubor, který vrací seznam názvů obrázků. Poté vše, co musíme udělat, je přidat tyto obrázky do našeho kontejneru a upravit výšku stránky posunutím pozice posunu výše.

Krok 2: Označení HTML

Zde musíme pouze nastavit název a kontejner pro naše obrázky. Miniatury budou seskupeny do sad po třech řádcích. Každá miniatura obsahuje odkaz na obrázek v plné velikosti. Za každou skupinu přidáme text, který ukazuje celkový počet zobrazených obrázků a odkaz na začátek stránky.

Webová galerie| Nekonečné rolování

Zobrazeno 9 obrázků | Nahoru

Krok 3: CSS

CSS je také docela jednoduché.

Body( background:#222; color:#666; ) #header( font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold; text-align:left; text-indent: 35px; šířka:800px; okraj-dole:10px;

Krok 4.

Nyní přidáme nějaké CSS3, abychom zaoblili rohy a nakreslili stíny. Nutno použít -moz-box-shadow A -moz-border-radius pro Firefox a -webkit-box-shadow A -webkit-border-radius pro Chrome a Safari.

#container( margin: 0 auto; width:800px; border:1px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-family:Verdana, Geneva, sans-serif; text -align:center; ) img( border:10px solid #444; -moz-border-radius: 5px; -webkit-border-radius: 10px; margin: 15px; ) img:hover( border-color:#555; - moz-box-shadow: 0px 0px 15px #111; -webkit-box-shadow: 0px 0px 15px #111;

Krok 5. PHP skript

Bude to velmi krátké. Musíme zavolat PHP skript s indexem dalšího obrázku, který potřebujeme jako parametr. První věc, kterou musíme udělat, je vzít všechny názvy obrázků ze složky a uložit je do pole. Existují dvě složky pro ukládání obrázků: palec A img, které obsahují miniatury a obrázky v plné velikosti v souladu s tím. Miniatury musí mít přesně stejné názvy jako obrázky v plné velikosti.

Jak již bylo zmíněno, obrázky jsou seskupeny do sad po třech řadách, z nichž každá obsahuje tři obrázky. Tímto způsobem potřebujeme vrátit pouze devět názvů obrázků pro skupinu. Vycházíme z indexu, který jsme obdrželi jako parametr, $n, a končíme $ n + 9. V každém kroku smyčky přidáme název obrázku a ";" za ním v řádku vráceného textu. Je tu malý trik. Nepotřebujeme nekonečné množství čísel obrázků. Abychom vytvořili efekt nekonečné galerie, která nikdy nekončí, pokaždé musí být index dalšího obrázku větší než celkový počet obrázků a musíme začít od začátku. To se provádí pomocí funkce % (modulo division) index a celkový počet snímků.

$i%count($files)

V důsledku toho dostaneme zbytek dělení. Například pokud index $i počet($files) je 45, výsledek bude 5. A pokud je index $i je 50 a počet obrázků počet($files) je 65, pak výsledek bude 50. Nakonec vrátíme text odpovědi.

Krok 7

Tady je plné znění PHP skript. Je třeba jej umístit do nového souboru .php.

Krok 8: JavaScript

Pojďme definovat několik proměnných, které budou později potřeba:

Var contentHeight = 800; var pageHeight = document.documentElement.clientHeight; var scrollPosition; var n = 10; var xmlhttp;

Abychom určili, kdy bude posuvník ve spodní části stránky, musíme definovat tři proměnné:

• contentHeight- výška původní galerie
• výška stránky- výška viditelná stránka v prohlížeči
• scrollPosition- poloha posuvníku měřená shora

Dále budeme potřebovat proměnnou pro uložení indexu dalšího obrázku (který předáme PHP skriptu) a proměnnou pro objekt požadavku Ajax.

Krok 9

Musíme definovat funkci, která bude přidávat obrázky do našeho HTML kontejneru.

Funkce putImages())( if (xmlhttp.readyState==4)( if(xmlhttp.responseText)(

Objekt požadavku během provádění požadavku mění své stavy. Každý stav je spojen s číselnou hodnotou. Zajímá nás konečný stav, kdy je požadavek dokončen a má hodnotu 4. Nejprve zkontrolujeme, zda je požadavek v požadovaném stavu a poté zkontrolujeme, zda jsme obdrželi odpověď či nikoliv.

Krok 10

Pokud jsou splněny obě podmínky, musíme vrácený text zpracovat. To znamená, že musíme oddělit názvy souborů a umístit je do pole. PHP skript vrací jeden řetězec s názvy oddělenými středníky, například: "Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg ; EndlessSlights.jpg;"

Var resp = xmlhttp.responseText.replace("\r\n", ""); var soubory = resp.split(";");

Musíme vyřešit malý problém. Text odpovědi může obsahovat úvodní znak nový řádek na první pozici. A my ho nepotřebujeme. Problém lze snadno vyřešit pomocí funkce nahradit, který má dva parametry: "\r\n" - znak nového řádku a "" - prázdný řetězec, který nahradí všechny výskyty prvního parametru. Nyní zbývá pouze rozdělit řádek pomocí symbolu ";".

Krok 11

Nyní přidáme obrázky do našeho kontejneru.

Var j = 0; for(i=0; i