Líné načítání obrázků. Správa nahrávání obrázků. Hlavní vlastnosti pluginu

• Překlad

V dnešní době jsou hlavním kamenem úrazu rychlého načítání webových stránek obrázky. To je typické zejména pro projekty elektronického obchodování. Na nich tvoří většinu obsahu stránky obrázky, obvykle dost „těžké“. To obvykle vede k tomu, že prohlížeč uživatele musí k zobrazení stránky stáhnout několik megabajtů grafických dat. Jak v této situaci urychlit načítání stránky? Odpověď na tuto otázku je předmětem materiálu, jehož překlad dnes zveřejňujeme.

Zde je počet obrázků načtených pro vytvoření této stránky:

Jak můžete vidět, existuje 137 obrázků! To znamená, že více než 80 % dat potřebných k zobrazení stránky a přenášených po síti je ve formě grafických souborů.

Pojďme nyní analyzovat síťové požadavky provedené při načtení stránky:

V tomto případě jsou soubory vzniklé rozdělením kódu projektu načteny později, než by mohly. K tomu dochází, protože si nejprve musíte stáhnout hlavní balíček cp_ny.bundle . Tento balíček by se mohl načítat mnohem rychleji, nebýt 18 obrázků, které mezi sebou soutěží o šířku pásma.

jak to opravit? Opravdu neexistuje způsob, jak to skutečně "opravit", ale existuje spousta věcí, které můžete udělat pro optimalizaci načítání obrázků. Existuje mnoho přístupů k optimalizaci obrázků používaných na webových stránkách. Mezi ně patří použití různých formátů grafických souborů, komprese dat, použití technik rozostření animace a použití CDN. Rád bych se pozastavil nad tzv. „líným načítáním“ obrázků. Zejména si povíme, jak tuto techniku ​​implementovat na webech React, ale jelikož je založena na mechanismech JavaScriptu, lze ji integrovat do jakéhokoli webového projektu.

Třída Image rozšiřuje PureComponent ( render() ( const ( src ) = this.props; return ; } }
Bere adresu URL jako vlastnost a používá ji k vykreslení prvku HTML img. Zde je odpovídající kód na JSFiddle. Následující obrázek ukazuje stránku obsahující tuto komponentu. Vezměte prosím na vědomí, že abyste viděli zobrazený obrázek, musíte posunout obsah stránky.

Chcete-li v této komponentě implementovat techniku ​​líného načítání obrázků, musíte provést následující tři kroky:

Render() ( return ; }

ComponentDidMount() ( this.observer = new IntersectionObserver(() => ( // zde je kód pro třetí krok), ( root: document.querySelector(".container") )); this.observer.observe(toto prvek this.element = el) />; )
Podívejme se na tento kód. Zde je to, co se udělalo:

• K prvku img byl přidán atribut ref. To vám umožní později aktualizovat odkaz na obrázek v src, aniž byste museli komponentu znovu vykreslovat.
• Byla vytvořena nová instance IntersectionObserver (o tom si povíme níže).
• Objekt IntersectionObserver je požádán, aby pozoroval obraz pomocí konstruktu sledovat(this.element) .

Na první pohled se tato charakteristika API nemusí zdát příliš jasná, ale ve skutečnosti je její struktura velmi jednoduchá. Instance IntersectionObserver předá několik parametrů. Použili jsme zejména parametr root, který nám umožňuje určit kořenový prvek DOM, který považujeme za kontejner, o průsečíku kterého prvku s okrajem potřebujeme vědět. Ve výchozím nastavení se jedná o oblast, kde se nachází viditelná část stránky (výřez), ale výslovně jsem ji nastavil tak, aby používala kontejner nalezený v prvku iframe JSFiddle. To bylo provedeno proto, abychom později zvážili jednu možnost, která není navržena pro použití prvků iframe.

Důvod, proč je použití IntersectionObserver k určení, kdy se prvek stane viditelným, populárnější než tradičnější metody, jako je použití onScroll a getBoundingClientRect() dohromady, je ten, že mechanismy IntersectionObserver běží mimo hlavní vlákno. Nicméně zpětné volání, které je voláno poté, co IntersectionObserver detekuje průnik prvku s kontejnerem, se přirozeně provádí v hlavním vláknu, takže jeho kód by neměl být příliš těžký.

This.observer = new IntersectionObserver(entries => ( entries.forEach(entry => (const ( isIntersecting ) = entry; if (isIntersecting)) ( this.element.src = this.props.src; this.observer = this.observer .disconnect() )); ( root: document.querySelector(.container")); ....
Když je detekován průsečík, je zpětnému volání předáno pole prvků záznamů, které se podobá sadě snímků stavu všech cílových prvků, pro které byl zjištěn průnik dané hranice. Vlastnost isIntersecting označuje směr průsečíku. Pokud sledovaný prvek spadne mimo kořenový prvek, je to pravda . Pokud prvek opustí kořenový prvek, pak je false .

Když se tedy zdá, že prvek protíná spodní okraj kontejneru, ručně nastavím jeho vlastnost src a zakážu jeho sledování, což již není nutné.

Když se však podíváme blíže na to, čeho jsme dosáhli, ukáže se, že zde lze najít něco nepříliš dobrého. Abych to viděl, rychle jsem posouval stránku a zpomalil připojení k síti.

Vzhledem k tomu, že obrázek načteme až poté, co se dostane do oblasti, ve které by již měl být viditelný, uživatel nemá možnost posouvat stránku a vidět oblast, kterou obrázek zabírá, a samozřejmě obrázek samotný, než bude nabito. Při prohlížení webových stránek z běžných počítačů připojených k rychlému internetu to nezpůsobuje problémy. Mnoho moderních uživatelů ale navštěvuje webové stránky ze svých telefonů, někdy využívají 3G sítě nebo ještě hůře EDGE připojení.

S tímto problémem však není tak těžké se vypořádat. To lze provést, protože rozhraní Intersection Observer API dává vývojáři možnost rozšířit nebo stáhnout hranice kořenového prvku (v našem případě prvku .container). Chcete-li využít této příležitosti, stačí přidat jeden řádek kódu do místa, kde je nakonfigurován kořenový kontejner:

RootMargin: "0px 0px 200px 0px"
Ve vlastnosti rootMargin musíte napsat řetězec, jehož struktura odpovídá pravidlům CSS používaným ke konfiguraci parametrů odsazení prvků. V našem případě říkáme systému, že spodní okraj používaný k detekci průniku prvku s kontejnerem by měl být zvýšen o 200 pixelů. To znamená, že odpovídající zpětné volání bude voláno, když prvek spadne do oblasti, která je 200 pixelů pod spodním okrajem kořenového prvku (výchozí hodnota je zde 0).

Zde je kód, který implementuje tuto techniku.

Výsledkem je, že když stránku posuneme pouze na 4. položku seznamu, obrázek se načte v oblasti, která je 200 pixelů pod viditelnou oblastí stránky.
Nyní se zdá, že vše, co je třeba udělat, bylo vykonáno. Ale to není pravda.

Obrázky se na stránku načítají dvěma hlavními způsoby: pomocí značky HTML a pomocí vlastnosti CSS background-image . Nejprve se tedy podíváme na příklad značky a poté přejdeme k obrázkům na pozadí CSS.

Začněme jednoduchým HTML značením pro vkládání obrázků na stránku.

Označení pro líně načtené obrázky je v podstatě stejné.

Druhým krokem je vyhnout se předčasnému načtení obrázku. Prohlížeč používá atribut src značky img ke spuštění načítání obrázku. A je jedno, zda je tento obrázek první nebo tisící. Pokud prohlížeč najde v označení atribut src, okamžitě začne načítat obrázek, i když je mimo rozsah.

Chcete-li zpozdit načítání obrázku, musíte adresu URL obrázku umístit do jiného atributu, než je atribut src, například do data-src. A protože je atribut src prázdný, prohlížeč tento obrázek nenačte.

Nyní, protože jsme zabránili okamžitému načtení obrázku, potřebujeme nějakým způsobem sdělit prohlížeči, kdy je třeba obrázek načíst. Jinak se to nikdy nestane. Za tímto účelem zkontrolujeme, zda je obrázek (v našem případě je jeho zástupným symbolem šedý obdélník) ve viditelné oblasti, a poté jej načteme.

Existují dva způsoby, jak určit, zda je obrázek v rozsahu. Podívejme se na každý z těchto příkladů prostřednictvím jejich kódů.

První metoda. Spusťte načítání obrázku pomocí událostí JavaScriptu

Tato metoda používá obslužné rutiny pro následující události: scroll, resize a OrientationChange. Událost posouvání určuje aktuální pozici uživatele na stránce, když kolem ní prochází. Události změny velikosti a orientace jsou stejně důležité. Událost resize se spustí při změně velikosti okna prohlížeče a událost OrientationChange se spustí, když se orientace zařízení změní z režimu na šířku na režim na výšku a zpět.

Tyto tři události použijeme k detekci změn obrazovky a výpočtu počtu obrázků, které by se měly na obrazovce zobrazit. Po tom všem je nahrajeme.

Když dojde k některé z těchto událostí, najdeme na stránce všechny obrázky, které se ještě nenačetly. Z těchto obrázků vybereme přesně ty, které jsou ve viditelné oblasti prohlížeče. Výběr se provádí na základě výpočtů horního odsazení obrázku, aktuální horní pozice dokumentu a výšky okna. Pokud se tedy ve výřezu objevil obrázek, vybereme jeho URL z atributu data-src a přesuneme jej do atributu src, prohlížeč pak obrázek načte.

Upozorňujeme, že k výběru všech obrázků, které mají třídu líný, používáme JavaScript. Jakmile se obrázek načte, tuto třídu odstraníme, protože již nepotřebujeme spouštět událost. A jakmile budou načteny všechny obrázky, odstraníme všechny obslužné rutiny událostí.

Nezapomeňte, že když stránku přetočíme, událost scroll se spustí mnohokrát. Abychom zlepšili výkon, přidali jsme do našeho skriptu malý časový limit, který reguluje provádění líného načítání, takže neblokuje další úlohy běžící na stejném vlákně v prohlížeči.

Zde je pracovní příklad tohoto přístupu:

V tomto článku jsme tedy probrali první metodu líného načítání obrázku a v příštím článku se budeme zabývat jinou metodou.

Zatímco mnoho lidí již sklízí výhody konceptů líného načítání, někteří z nich stále přemýšlí o líném načítání. Pokud máte trochu představu o líném načítání a o tom, co umí, pak je tento článek určen právě vám. Probrali jsme vše, co potřebujete vědět o líném načítání. Tak si přečtěte článek a začněte!

Než začneme s výhodami líného načítání, dejte nám vědět, co je líné načítání a jak funguje.

Líné načítání je mechanismus, ve kterém nemůžeme oddálit načítání konkrétního objektu, může to být video nebo jen obrázek, až do určitého bodu, kdy to dokážeme. Zjednodušeně řečeno, líné načítání znamená načítání objektů na vyžádání spíše než načítání všech objektů ve výchozím nastavení. Problém automatického stahování je tak nepříjemný. Tento zvyšuje rychlost webu, takže se objekty načítají rychleji.

Vyhledávač Google nemůže zobrazit položky, které jsou líně načteny. Nejsem si jistý? Zde je příklad. Pokud máte jakoukoli část svého webu s obrázkem produktu v dolní části domovské stránky a máte povoleno líné načítání, pak se konkrétní sekce nenačte, dokud tuto sekci nezvýrazníte. V důsledku toho se zdrojový kód stránky nezobrazí. takže on se nezobrazí v mezipaměti Google .

Líně stažený obsah nebude vyhledávači indexován. Protože tento obsah není indexován, což samozřejmě povede k nižšímu hodnocení těchto položek. Proces SEO se tak nebude spoléhat na líně načtený obsah, který se zobrazí ve výsledcích vyhledávání.

Je to mýtus! Optimalizace webu nemá s líným načítáním mnoho společného. Skript Ajax bude stále spuštěn. Jediný rozdíl je v tom, že poběží na pozadí. Stránka se bude načítat rychleji! O tom není pochyb! Nemá vliv na optimalizaci webu.

Líné načítání je mechanismus, který vás může dostat k něčemu, po čem každý touží – k webu rychlostí blesku. Přiznejme si to: všichni netrpělivě čekáme na načtení obsahu. Jakmile dojde ke zpoždění, i několik sekund způsobí, že webovou stránku opustíme. Díky línému načítání nemusíme čekat, až se načte veškerý obsah.

Jak stahovat méně zdrojů, které potřebujete, není prostor pro zbytečné stahování veškerého obsahu na webové stránce. Díky tomu se vaše stránka načítá mnohem rychleji.

Pokud se nacházíte na stránce, která obsahuje 5 bezplatných a upgradovatelných celoobrazovkových obrázků, načte se pouze několik úvodních obrázků v příspěvku WordPress a zbytek se načte, pouze pokud se posunete dolů na konec stránky. Tímto způsobem můžete zabránit webu v odesílání požadavku HTTP pro každý jednotlivý obrázek. Vyhnout se značnému počtu požadavků HTTP znamená ušetřit spoustu času pro váš web WordPress.

Na líné načítání na WordPressu, můžete mít také rychlejší přístup k veškerému obsahu. , i když zůstává stejný, rychlost načítání obsahu se zvyšuje.

Můžete se vyhnout zbytečnému stahování obsahu a také ušetřit spoustu vašich dat. Obsah, který vás znepokojuje, můžete sledovat posunutím do spodní části stránky.

Nyní, když jste přesvědčeni o různých výhodách, které má líné načítání, můžete je implementovat na svůj web, existuje několik pluginů, které vám pomohou dosáhnout vašeho cíle.

Tento plugin pro líné načítání je odlehčenou, vyváženou variantou tradičního líného načítání. Má speciální podpůrný systém, který poskytuje snímky s vysokým rozlišením na displejích kompatibilních s retina. Plugin Image Lazy Load také obsahuje možnosti pro načítání obrázků do smartphonů komprimací počtu pixelů, které se k vám dostanou, než si budete moci obrázky prohlédnout.

Tento plugin pro líné načítání umožňuje uživatelům vybírat obrázky a miniatury, Gravatary, snímky v příspěvcích a nahrazovat obsah zástupným symbolem. Při výběru konkrétního zástupného symbolu můžete přeskočit obrázky s různými třídami. BJ Lazy Load se také stará o různé velikosti optimalizovaných obrázků a automaticky poskytuje obrázky HiDPI pro různé obrazovky HiDPI, jako je sítnice Apple.

Přidá Jquery líné načítání různých obrázků. Nejlepší na tomto pluginu je, že se velmi snadno používá. Vše, co musíte udělat, je jednoduše nainstalovat a aktivovat. Obrázky na webu, který navštívíte, se automaticky načtou, když se posunete dolů na konec stránky. Na načtení obrázků nemusíte dlouho čekat. Stejně jako když otevřete webovou stránku a posunete se na konec stránky, obrázky jsou již načteny!

Ahoj všichni. Dnes s vámi chci mluvit o tom, jak organizovat líné načítání obsahu na vstupních stránkách.

Často se tomu také říká „nekonečné rolování“. Pravděpodobně jste viděli podobný efekt, když obsah zpočátku nebyl na webu přítomen, ale při posouvání stránky se plynule načítá.

Již dávno jsme napsali do sekce „Vaše návrhy“ s žádostí o napsání článku o tom, jak takový efekt implementovat:

Rozhodl jsem se tedy začít s jeho realizací. Díky za nápady. Začněme...

Jako ve většině případů začneme zahrnutím knihovny jQuery:

Nyní musíme trochu odbočit a vysvětlím vám podstatu metody. To vše se spouští proto, aby se nenačítaly všechny prvky webu (vaše portfolio či recenze), ale aby se načítaly podle potřeby. Například, když uživatel klikne na tlačítko „Zobrazit více“. Stránka se tak bude načítat mnohem rychleji. A teď jde o to, že pomocí technologie ajax načteme požadovaný prvek (div) a soubor třetí strany na naši vstupní stránku. Je to tak jednoduché, teoreticky i prakticky, a brzy to uvidíte.

Nyní vytvoříme hlavní blok, například s obrázky našich prací. Předpokládejme, že nakreslíme ikony a načteme je po kliknutí na tlačítko. Vytvořil jsem tuto strukturu:

Portfolio Zobrazit více...

Jak vidíte, vše je jednoduché. Na co si ale dát pozor? A musíte věnovat pozornost div s id="smartPortfolio", id="moreButton" a id="loadingDiv", protože jsou použity ve skriptu, což nám pomáhá načítat obsah z jiných stránek. SmartPortfolio je „kontejner“ pro naše portfolio. MoreButton - to bude naše tlačítko, po kliknutí se načte další část portfolia. LoadingDiv - oblast, ve které se zobrazí text, když je portfolio plně otevřené nebo dojde k nějaké chybě.

Někteří čtenáři se například stále pokusí otestovat tento skript ne na serveru, ale jednoduše otevřou indexový soubor v prohlížeči. Pokud ano, zobrazí se jim chybová zpráva. Kromě toho, pokud je připojení velmi pomalé, může stahování souborů chvíli trvat, a aby uživatel pochopil, že proces probíhá, můžete tam zadat zprávu, že se data stahují nebo umístit (obrázek, průběh indikátor nebo něco jiného).

Samotný skript jsem nenapsal, ale našel jsem ho na jednom ze stránek, autor je uveden ve zdrojovém kódu, pokud máte zájem, mrkněte. Vzhledem k tomu, že není příliš velký, dám to všechno, ale pokud plánujete používat stejná ID jména a cesty k souborům jako já, nemusíte se na to ani dívat, ale jednoduše to zahrňte před uzavírací značku body (v patičce).

Pro ty, kteří plánují provádět úpravy, zde je samotný skript:

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));

Nyní tedy stojí za to mluvit o souborech, ze kterých budeme načítat informace. Skript předpokládá, že se bude jednat o soubory s názvy 2.html...5.html atd. Která obsahuje naše informace. Například první soubor, který načtu, je 2.html a má následující obsah:

Ve struktuře mého webu jsou stránky, ze kterých budou po kliknutí převzaty informace pro následné načtení, umístěny ve složce stránek. Existují tři soubory, z nichž dva jsou plné a poslední je prázdný. To předpokládá logika skriptu.

Cesta ve skriptu je určena takto:

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

Pokud plánujete použít jinou cestu, nezapomeňte ji ve skriptu nahradit. Pokud jste navíc použili jiná ID, bude nutné je ve skriptu předefinovat. Právě tady:

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

A jak jsem již řekl, před uzavírací značku body zahrneme samotný skript:

Takto můžete implementovat „líné načítání“ na svou vstupní stránku. Pošlete nám další témata, o kterých byste si chtěli přečíst článek na blogu. Pokud to bude možné, pokusím se zveřejnit ne plánovaný materiál, ale ten, na který se zeptáte v sekci „Vaše návrhy“. A to je pro dnešek vše. Sbohem!

• Překlad
• Tutorial

Rychlé a plynulé načítání obrázků je jednou z důležitých součástí dobrého webového rozhraní. Navíc se objevuje stále více stránek, které v designu používají velké fotografie, u takových projektů je zvláště důležité hlídat správné načítání grafiky. Tento článek popisuje několik technik, které vám pomohou řídit načítání obrazu.

Pomocí kontejneru můžete ovládat poměr stran obrázku a také použít indikátor načítání, což je velmi výhodné, pokud jsou obrázky těžké.

Chcete-li například nastavit poměr stran na 4:3, můžete použít následující CSS:

Img_wrapper( pozice: relativní; padding-top: 75 %; přetečení: skryté; ) .img_wrapper img( pozice: absolutní; horní: 0; šířka: 100 %; neprůhlednost: 0; )
Chcete-li zajistit, aby se obrázek v prohlížeči zobrazil až po jeho úplném načtení, musíte pro obrázek přidat událost onload a ke zpracování události použít JavaScript:

function imgLoaded(img)( var $img = $(img); $img.parent().addClass("načteno"); );
Funkční kód uvnitř tagu HEAD by měl být umístěn úplně na konci, za jakýmkoli jQuery nebo jiným pluginem. Po úplném načtení obrázku se musí zobrazit na stránce:

Img_wrapper.loaded img( neprůhlednost: 1; )
Pro efekt hladkého vzhledu obrázku můžete použít přechod CSS3:

Img_wrapper img( pozice: absolutní; horní: 0; šířka: 100 %; neprůhlednost: 0; -webkit-transition: neprůhlednost 150 ms; -moz-přechod: neprůhlednost 150 ms; -ms-přechod: neprůhlednost 150 ms; přechod: neprůhlednost) 150 ms;
K dispozici je živý příklad této metody.

K řízení procesu používáme funkci slideLoaded():

Funkce slideLoaded(img)( var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find("img").length, procentLoaded = null; $img.addClass("loaded "); var load = $slideWrapper.find(".loaded").length; if(loaded == total)( percentLoaded = 100; // INSTANTIATE PLUGIN $slideWrapper.easyFader(); ) else ( // SLEDOVAT PROGRESS procentLoaded = naloženo/celkem * 100);
Načteným obrázkům je přiřazena načtená třída a zobrazí se celkový průběh. Opět platí, že JavaScript by měl být umístěn na konec značky HEAD, za vším ostatním.

var heroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]
Když návštěvník navštíví web, po načtení hlavní stránky se do mezipaměti začnou načítat obrázky. Chcete-li zajistit, aby ukládání do mezipaměti nenarušovalo zobrazení aktuálního obsahu, musíte do události načtení okna přidat funkci JavaScript:

Function preCacheHeros())( $.each(heroArray, function())( var img = new Image(); img.src = this; )); $(window).load(function())( preCacheHeros(); ));
Tato metoda zlepšuje použitelnost webu, ale zvyšuje zatížení serveru. To je třeba mít na paměti při implementaci takové funkce. Kromě toho je nutné vzít v úvahu možné cesty návštěvníků na webu a kešovat obrázky umístěné na stránkách, které uživatel s největší pravděpodobností navštíví. Pro pochopení takových cest po webu je nutné analyzovat statistiky návštěvnosti.

Stojí za zmínku, že adresa URL obrázku je uvedena v data-src, nikoli src. To je nutné, aby prohlížeč obrázek okamžitě nestáhl. Místo toho je do src načten transparentní pixel GIF base64, který snižuje počet zpátečních cest na server.

Zbývá pouze změnit hodnotu src na data-src, když dojde k požadované události. JavaScript vám umožňuje načítat obrázky postupně:

Function lazyLoad())( var $images = $(".lazy_load"); $images.each(function())( var $img = $(this), src = $img.attr("data-src") ; $ img .on("načíst",imgLoaded($img)) .attr("src",src )); $(window).load(function())( lazyLoad(); );